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

Posted 2023-02-22

【中文标题】Vue：处理多个 API 调用的最佳实践

【英文标题】：Vue: Best practices for handling multiple API calls

【发布时间】：2019-04-25 13:26:55

【问题描述】：

所以我发现自己在我的 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 调用都正确获取数据，我只想处理提交，请帮助正在学习的人。

【参考方案1】：

axios.all([
    axios.get(firstUrl),
    axios.get(secondUrl)
])
.then(axios.spread(function (response1, response2) 
    //response1 is the result of first call
    //response2 is the result of second call
))
.catch(function (error) 

);

关于 catch() 的注意事项：在第一个失败的请求时调用它，省略其余的调用。因此，如果第一次调用失败，则调用 catch() 甚至不会发出第二次请求。

【参考方案2】：

我想你可能想了解一下promises。

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

使用 Promises 你可以做多个请求，当所有请求都成功后你可以执行代码。

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

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

【讨论】：

我能不能用这个捕获两个调用的错误，我有点困惑

是的，在链接Part V: The Bottom Line 上有一个 .all 的示例，如您所见，catch 拦截了所有错误，因此您需要一个额外的逻辑来根据您的应用程序正确管理错误。