从axios返回数据，而不是承诺
从axios返回数据，而不是承诺
提问于 2019-12-11 12:55:20
我用axios对我的json文件进行了一个假api调用。我从函数中得到了一个承诺，我可以从这个函数中获取数据。但我不想那样。我想从函数中接收数据。
我现在的代码: products.js
export default {
getAllProducts(axios) {
return axios.get('fakedb.json').then(response => {
return response.data;
});
}
}视图文件:一个product.vue文件
import productController from '~/data/controllers/product';
export default {
data() {
return {
products: productController.getAllProducts(this.$axios).then(res => this.products = res)
}
},
}但这不是我想要达到的目标。我想要实现的是我的product.vue文件中的代码：
import productController from '~/data/controllers/product';
export default {
data() {
return {
products: productController.getAllProducts(this.$axios)
}
},
}我想接收数据而不必处理视图文件中的承诺。如何在products.js文件中返回我的数据？
如果我像这样从products.js文件中进行正常的返回，那么它工作得很好：
export default {
getAllProducts(axios) {
return [
{
"name": "Product1",
"price": 9.75
},
{
"name": "Product2",
"price": 10.75
}
]
}
}但是我想让它和axios一起
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-11 13:42:13
因为您有一个. vue -文件，所以我假设这是一个单页vue组件，对吗？所以你用vue-cli或者webpack。因此，我假设您可以使用异步/等待语法。
从axios检索数据是异步的，因为您根本不知道通过网络检索数据需要多长时间。这种情况就是异步/等待的目的。
因此，让函数异步：
products.js
export default {
async getAllProducts(axios) {
const response = await axios.get('fakedb.json');
return response.data;
}
}product.vue：
import productController from '~/data/controllers/product';
export default {
data() {
return {
products: [],
};
},
async mounted: {
this.products = await productController.getAllProducts(this.$axios);
}
}我不认为您可以使数据函数异步，所以返回一个空数据对象(我假设它是一个数组)，然后使用mounted钩子检索数据。
Stack Overflow用户
发布于 2019-12-11 13:35:54
一个函数会立即返回，如果你不想要一个承诺的话，就没有什么有意义的返回了，因为加载还没有开始。这就是承诺首先解决的问题。但是，首先对数据进行异步调用是一种糟糕的模式。请使用此模式：
data() {
return {
products: null
}
},
methods: {
getAllProducts() {
return axios.get('fakedb.json').then(response => {
this.products = response.data;
});
}
},
created() {
this.getAllProducts();
}异步调用被抽象到created钩子中，当它被解析时，它将相应地设置数据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59286335
复制相关文章
相似问题
腾讯云开发者
