在我的代码库中有使用创建的各种 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 实例的全局拦截器。
最佳答案
第一个选项 - “更简单”
只需创建您自己的“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 实例保持相同的配置,同时使您的代码尽可能通用和干净
关于javascript - Axios:对多个 axios 实例使用相同的拦截器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67812753/