如何为多个Axios客户端配置公共拦截器且不全局生效？

核心思路是将拦截器注册逻辑和客户端创建逻辑绑定，或者通过批量操作减少重复代码，两种适配不同场景的方案如下：

方案1：封装客户端创建工厂（推荐适配新代码/可重构场景） #

把通用拦截器的注册逻辑封装到统一的客户端创建函数内，后续新增客户端直接调用该函数即可自动挂载通用拦截器，从根源避免重复注册代码。

import axios from 'axios'

// 抽离公共拦截器处理逻辑
const commonRequestFulfilled = (config) => {
  doingSomeMysteriousStuff()
  return config
}
const commonRequestRejected = (error) => {
  doingSomeOtherMysteriousStuff()
  return Promise.reject(error)
}
const commonResponseFulfilled = (response) => response
const commonResponseRejected = (error) => Promise.reject(error)

// 统一客户端创建工厂
function createAxiosClient(customConfig) {
  const client = axios.create(customConfig)
  // 自动挂载通用拦截器
  client.interceptors.request.use(commonRequestFulfilled, commonRequestRejected)
  client.interceptors.response.use(commonResponseFulfilled, commonResponseRejected)
  return client
}

使用时直接传入不同客户端的独有配置即可，无需再手动注册拦截器：

const api1Client = createAxiosClient({
  baseURL: process.env.VUE_APP_API1_HOST,
  // 其他独有配置
})
const api2Client = createAxiosClient({
  baseURL: process.env.VUE_APP_API2_HOST,
  // 其他独有配置
})

如果部分客户端需要额外的独有拦截器，拿到实例后单独追加即可：

api1Client.interceptors.response.use(/* 仅api1需要的响应拦截逻辑 */)

方案2：批量注册工具（适配存量代码场景） #

如果项目中已经存在大量独立创建的Axios客户端实例，不想改动现有创建逻辑，可以写批量注册工具统一挂载拦截器：

// 批量注册通用拦截器的工具函数
const registerCommonInterceptors = (clientList) => {
  clientList.forEach(client => {
    client.interceptors.request.use(commonRequestFulfilled, commonRequestRejected)
    client.interceptors.response.use(commonResponseFulfilled, commonResponseRejected)
  })
}

// 调用时传入所有需要挂载通用拦截器的客户端实例即可
registerCommonInterceptors([api1Client, api2Client, api3Client])

内容的提问来源于stack exchange，提问作者Pierre de LESPINAY