时间戳

首页 > 解决方案 > axios：对多个 axios 实例使用相同的拦截器

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

问题描述

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

axios.create()

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

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

  1. 请求拦截器
  2. 响应拦截器
axios.interceptors.response.use(
        config => {
          return config;
        },
        error => {          
          if (error && error.response.status === 401) {
              signOut();
          }
          return Promise.reject(error);
        }
      );

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

问题：

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

标签： javascriptreactjsaxios

解决方案

第一个选项 - “更容易”

只需创建您自己的“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 实例保持相同的配置，同时保持您的代码尽可能通用和干净

推荐阅读