axios：对多个 axios 实例使用相同的拦截器答案

【问题标题】：Axios: use same interceptor with multiple axios instancesaxios：对多个 axios 实例使用相同的拦截器
【发布时间】：2021-06-02 21:21:57
【问题描述】：

在我的代码库中，有各种使用创建的 Axios 实例

axios.create()

因为我的应用程序中使用了多个基本 URL。所以我们根据 baseURL 创建了一个对应的 Axios 实例。

现在在 App.js 文件中，我已经包含了 2 个拦截器

请求拦截器
响应拦截器

axios.interceptors.response.use(
        config => {
          return config;
        },
        error => {          
          if (error && error.response.status === 401) {
              signOut();
          }
          return Promise.reject(error);
        }
      );

但是所有的 API 调用都绕过了上面提到的 2 个拦截器。

问题：

我想将上述拦截器用作我项目中所有 Axios 实例的全局拦截器。

【问题讨论】：

github.com/axios/axios/issues/993

标签： javascript reactjs axios

【解决方案1】：

第一个选项 - “更简单”

只需创建您自己的“axios 生成器”函数。

const createAxios = (baseURL) => {
   const newInstance = axios.create({ baseURL });

   newInstance.interceptors.response.use(
      (config) => config,
      (error) => {
        if (error && error.response.status === 401) {
          signOut();
        }
        return Promise.reject(error);
      }
    );

    return newInstance;
}

第二个选项 - 更复杂 我个人更喜欢这个选项，因为我觉得它更整洁，逻辑上分离和划分（每个“实体”独立存在）。

我可能会创建一个看起来像这样的 BasicService 类：

import axios from 'axios';

class BasicService {
  constructor(url) {
    const options = {
      baseURL: url,
      // any options that you would want for all axios requests,
      // like (proxy, etc...)
    };
    
    this.fetcher = axios.create(options);

    // Your default config
    this.fetcher.interceptors.response.use(
      (config) => {
        return config;
      },
      (error) => {
        if (error && error.response.status === 401) {
          signOut();
        }
        return Promise.reject(error);
      }
    );
  }
}

然后对于我想创建的每个 axios 实例，我还将创建一个包含所有提取的类。喜欢：

const baseURL= '/users';

class UserService extends Service {
  // GET Requests
  async GetAll() {
    return (await this.fetcher.get('/all')).data;
  }

  // POST Requests
  async insertUser(userToInsert) {
    return await this.fetcher.post(...)
  }
}

const userService = new UserService(baseURL);

export default userService;

然后在任何文件中，我只需导入我想要的服务并获取它

import UserService from "/services/UserService";
UserService.getAll().then(...);

这可以帮助您为所有 axios 实例保持相同的配置，同时保持您的代码尽可能通用和干净

【讨论】：