我发现自己在 vuex 操作中进行了多个 API 调用，这让我想知道处理这种情况的最佳方法是什么，多个 API 调用的最佳实践，让我们从我的代码开始。
我有一个操作，从不同的 API 端点（后端为 Laravel）收集所有帖子和所有帖子类别，我确信必须有比我这样做更好的方法来处理这个问题：
fetchAllPosts ({ commit }) {
commit( 'SET_LOAD_STATUS', 1);
axios.get('/posts')
.then((response) => {
commit('FETCH_ALL_POSTS', response.data.posts )
commit( 'SET_LOAD_STATUS', 2 );
},
(error) => {
console.log(error);
commit( 'SET_LOAD_STATUS', 3 );
})
axios.get('/postcategories')
.then((response) => {
commit('FETCH_ALL_POSTCATEGORIES', response.data.postcategories )
commit( 'SET_LOAD_STATUS', 2 );
},
(error) => {
console.log(error);
commit( 'SET_LOAD_STATUS', 3 );
})
},
我能想到的我的方法的第一个问题是，如果第一个 API 调用失败但第二个 API 调用成功，我将得到加载状态 2（这里 2 等于成功）！
我只想在第一个和第二个 API 调用都正确获取数据的情况下继续提交。
我想你可能想读一下promises https://medium.com/quick-code/javascript-promises-in-twenty-minutes-3aac5b65b887.
在您的示例中，您使用的是 Axios，它是一个基于 Promise 的 HTTP 客户端，这非常棒。
使用 Promises，您可以执行多个请求，当所有请求都成功时，您就可以执行代码。
使用 Axios，您可以使用 .all 来做到这一点，如下所示：
axios.all([getPosts(), getPostCategories()])
.then(axios.spread(function (posts, categories) {
// Both requests are now complete
}));
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
