axios的interceptors多次执行问题解决

问题背景：

在使用axios发送多个请求时，可能会遇到interceptors被多次执行的问题，导致请求超时或出现其他异常。这是因为每一个请求都会创建一个axios实例，而interceptors是拦截器，针对每一个axios实例单独设置的。如果每一个实例中都设置了interceptors，那么这些拦截器就会被多次执行，从而导致问题。那么，该如何解决这个问题呢？

解决方案：

解决这个问题的核心思路在于：尽量减少axios实例的创建，尽量集中管理拦截器的设置。下面我们将通过两个示例说明如何实现这个思路。

示例一：创建公用的axios实例

在这个示例中，我们使用单例模式来创建一个公用的axios实例，使得所有的请求都使用同一个axios实例，并在这个实例上设置interceptors。这样就能避免interceptors被多次执行的问题。

import axios from 'axios';

let instance = null;

class AxiosHelper {
  constructor() {
    if (!instance) {
      instance = axios.create();
      instance.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        return config;
      }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      });

      instance.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        return response;
      }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
      });
    }
    return instance;
  }

  // 封装get请求
  get(url, params) {
    return instance.get(url, { params: params });
  }

  // 封装post请求
  post(url, data) {
    return instance.post(url, data);
  }
}

export default AxiosHelper;

示例二：使用axios的全局配置

在这个示例中，我们使用axios的全局配置来设置interceptors。这种方式能够集中管理interceptors，避免被多次执行的问题。具体代码如下：

import axios from 'axios';

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

// 封装get请求
function get(url, params) {
  return axios.get(url, { params: params });
}

// 封装post请求
function post(url, data) {
  return axios.post(url, data);
}

export {
  get,
  post
};

总结：

通过以上两个示例，我们可以看到，解决axios的interceptors多次执行问题的关键在于减少实例的创建，集中管理拦截器的设置。具体采用哪种方式，可以根据实际情况灵活选择。但无论采用哪种方式，都需要具体问题具体分析，明确自己的需求和场景。