首页 > 解决方案 > 为多个客户端定义拦截器

问题描述

我正在使用多个 Axios 客户端。

const api1Client = axios.create({
    baseURL: process.env.VUE_APP_API1_HOST,
    // ...
});
const api2Client = axios.create({
    baseURL: process.env.VUE_APP_API2_HOST,
    // ...
});
// ...

有些我需要指定常见的拦截器,我想避免重复定义。

api1Client.interceptors.request.use(config => {
    doingSomeMysteriousStuff();
    return config;
}, error => {
    doingSomeOtherMysteriousStuff();
    return Promise.reject(error);
});

api2Client.interceptors.request.use(config => {
    doingSomeMysteriousStuff();
    return config;
}, error => {
    doingSomeOtherMysteriousStuff();
    return Promise.reject(error);
});

我仍然可以这样做,但对我来说仍然重复太多:)

api1Client.interceptors.request.use(
    doingSomeMysteriousStuffHandler,
    doingSomeOtherMysteriousStuffHandler
);
api2Client.interceptors.request.use(
    doingSomeMysteriousStuffHandler,
    doingSomeOtherMysteriousStuffHandler
);

如何在不全局指定拦截器的情况下分解它?

标签: javascripttypescriptaxios

解决方案


这是我根据@RyanLe 和@Bergi 的建议得出的结论,谢谢大家。

[api1Client, api2Client].forEach((client) => {
    client.interceptors.request.use(
        (config) => {
            doingSomeMysteriousStuff();
            return config;
        },
        (error) => {
            doingSomeOtherMysteriousStuff();
            return Promise.reject(error);
        }
    );
});

这使我不仅可以处理拦截器。


推荐阅读