Vue：处理多个 API 调用的最佳实践

Question

所以我发现自己在我的 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 调用失败但第二个调用成功，我将获得 2 的加载状态（此处 2 等于成功）！

如果第一个和第二个 API 调用都正确获取数据，我只想处理提交，请帮助正在学习的人。

Answer 1

我想你可能想读一下promises。

在您的示例中，您使用的是 Axios，它是一个基于 Promise 的 HTTP 客户端，这很棒。

使用 Promises，您可以执行多个请求，当所有请求都成功时，您就可以执行代码。

使用 Axios，您可以像这样使用 .all 来做到这一点：

axios.all([getPosts(), getPostCategories()])
  .then(axios.spread(function (posts, categories) {
     // Both requests are now complete
  }));