如何控制 `axios.all()` 在错误发生时的行为？——拦截器和并发限制指南

vue.js

2024-03-07 02:32:20

如何控制 axios.all() 在错误发生时的行为？

问题：`axios.all()` 不受控地运行，即使遇到错误

axios.all() 函数是一个强大的工具，用于并发执行多个 axios 请求。然而，当其中一个请求失败时，它可能会继续执行，从而导致不必要的网络流量和混乱的错误处理。

解决方法：拦截器和并发限制

为了解决这个问题，我们可以使用以下方法：

1. 拦截器：

使用 axios 拦截器可以拦截对服务器的请求和响应。在我们的情况下，我们可以在拦截器中检查响应状态，并在遇到未经授权错误（例如 401）时取消所有正在进行的请求。这样可以防止 axios.all() 在遇到第一个错误后继续执行。

2. 并发限制：

axios.all() 接受一个名为 maxConcurrency 的选项，该选项允许我们指定同时执行的最大请求数。通过设置一个较低的并发限制（例如 1），我们可以确保在遇到错误时不会同时发送多个请求。

代码示例

将拦截器和并发限制结合使用，可以实现对 axios.all() 的全面控制：

import axios from 'axios';

// 创建拦截器
axios.interceptors.response.use(response => response, (error) => {
  const { response } = error;

  if ([401].indexOf(response.status) > -1) {
    // 取消所有正在进行的请求
    axios.CancelToken.source().cancel();
  }

  return Promise.reject(error);
});

// 执行并发限制
axios.all([
  getChannels(),
  getContacts(),
  getEventActions()
], {
  maxConcurrency: 1
}).then(axios.spread(function (channels, contacts, eventActions) {
  // 处理成功响应
})).catch(error => {
  // 处理错误
});