Question

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

2021-06-02

5622

javascript reactjs axios

在我的代码库中，有使用

axios.create()

创建的各种 Axios 实例。因为我的应用程序中使用了多个基本 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 BasicService {
  // 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 实例保留相同的配置，同时尽可能保持代码的通用性和整洁

Answer 2

您可以创建一个拦截器函数，然后将其与所需的实例一起使用。

  const commonErrorInterceptor = (error: any) => {
    // Do something with the error (e.g., handle specific error codes, show error messages, etc.)
    let responseError: responseErrorInterface;
    if (error.response.status === STATUS_CODES.BAD_REQUEST) {
      responseError = {
        status: error.response.status,
        code: error.response.data.errors.code,
        message: error.response.data.errors.message,
      };
    } else {
      responseError = {
        status: error.response.status,
        code: 0,
        message: error.response.message,
      };
    }
    return Promise.reject(responseError);
  };

与不同的 axios 实例一起使用：

 fetcher.interceptors.response.use(
    commonResponseInterceptor,
    commonErrorInterceptor,
  );
  fetcherWithJWT.interceptors.response.use(
    commonResponseInterceptor,
    commonErrorInterceptor,
  );
  fetcherWithCredentials.interceptors.response.use(
    commonResponseInterceptor,
    commonErrorInterceptor,
  );