Axios：對多個 axios 實例使用相同的攔截器

Question

在我的代碼庫中，有各種 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 實例的全局攔截器。

Answer 1

第一個選項 - “更容易”

只需創建您自己的“axios 生成器”function。

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 Class，它看起來像這樣：

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 實例，我還將創建一個包含所有提取的 class。 喜歡：

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 實例保持相同的配置，同時保持您的代碼盡可能通用和干凈