api 请求返回未定义

Question

也许是个愚蠢的问题，但是， 当我从“外部”函数调用 api 时，它总是返回未定义， 例如：

actions.js

import axios from 'axios'

export function getProducts() {
    axios.get('http://localhost:8000/api/products').then((response) => {
        return response;
    });
}

然后在一个组件中：

mounted() {
        this.products = getProducts();
        console.log(this.products);
    }

返回未定义

当然，当我从组件发出请求时，它会返回结果

mounted() {
        axios.get('http://localhost:8000/api/products').then((response) => {
            this.products = response;
            console.log(this.products);
        });
    }

为什么会发生这种情况，我该如何解决这个问题？

谢谢

Answer 1

您在axios.get 调用的then 回调中返回response 值。但是，您的 getProducts 函数不会返回任何内容。

只需返回axios.get 调用：

export function getProducts() {
  return axios.get('http://localhost:8000/api/products');
}

那么，getProducts 的结果将是axios.get() 返回的Promise。因此，您可以在getProducts 的结果上添加一个then 回调，然后将this.products 设置为这样：

mounted() {
  getProducts().then(products => this.products = products);
}