javascript - Axios:对多个 axios 实例使用相同的拦截器

Question

在我的代码库中有使用创建的各种 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 实例的全局拦截器。

Answer 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 实例保持相同的配置，同时使您的代码尽可能通用和干净