vue项目axios实现多实例共享一个拦截器

axios配置多实例共享拦截器

定义一个class 在class内部写上axios拦截器方法

import axios from 'axios'
import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' // 引入样式
import store from '@/store'
// 携带部分参数白名单
const whiteList = [
    '/oauth2/v3/user/login/apply',
    '/oauth2/v3/authorize/apply',
    '/oauth2/v3/authentication/apply',
    '/smartSite/v3/xchy/getMeetingTimeByMeetingId',
    '/smartSite/v3/xchy/getCodeAndSign',
    '/smartSite/v3/xchy/manualSign'
]
const HEADER_TENANT_ID = 'X-Authorization-tenantid'
const HEADRE_TOKEN = 'X-Authorization-access_token'
const HEADRE_SYSTEMID = 'X-Authorization-systemid'
class Request {
    // axios 实例
    instance
    constructor(config) {
        this.instance = axios.create(config)
        //  * 请求(request)拦截器
        //  *
        //  *  get 请求  统一参数放在params里面 // 后台对应只有@RequestParam
        //  *      // `params` 是即将与请求一起发送的 URL 参数
        //  *     // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
        //  *  post 请求 统一参数放在data里面    // json 格式 后台对应@RequestBody ,其他 后台对应@RequestParam
        //  *   === // `data` 是作为请求主体被发送的数据
        //  *     // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
        //  *    // 在没有设置 `transformRequest` 时，必须是以下类型之一：
        //  *    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
        //  *     // - 浏览器专属：FormData, File, Blob
        //  *     // - Node 专属： Stream
        //  *   ==// post 请求 `params`  这个同get 但要注意  后台对应@RequestParam 请求的`Content-Type`是 application/x-www-form-urlencoded 用 qs.stringify 去构造数据
        this.instance.interceptors.request.use(
            (res) => {
                //  生产关闭下面
                if (process.env.VUE_APP_BASE_API === "") {
                    res.url=`/api${res.url}`
                  // 开发环境
                }
                console.log(res, 'res')
                console.log('全局请求拦截器')
                NProgress.start()
                if (whiteList.indexOf(res.url) !== -1) {
                    return res
                } else {
                    // 租户ID
                    res.headers[HEADRE_TOKEN] = store.getters.token
                    // 租户ID
                    res.headers[HEADER_TENANT_ID] = store.getters.tenantId
                    // 系统ID
                    res.headers[HEADRE_SYSTEMID] = store.getters.systemid
                    return res
                }
            },
            (err) => {
                NProgress.done()
                return Promise.reject(err)
            },
        )
        this.instance.interceptors.response.use(
            (res) => {
                console.log(res, 'res')
                NProgress.done()
                console.log('全局响应拦截器')
                return res.data
            },
            (err) => {
                NProgress.done()
                return Promise.reject(err)
            },
        )
    }
    request(config) {
        return this.instance.request(config)
    }
}

export default Request

然后在另一个文件创建axios实例传入config 在这里使用模块化导出 就可以实现分别使用多个实例地址

import Request from './requestClass'
const TIMEOUT = 3000 * 100 // 请求超时（timeout）时间
const service = new Request(
  {
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: TIMEOUT,
    withCredentials: true, // 跨域安全策略
    headers: {
      'Cache-Control': 'no-cache'
    },
  }
)
const service2 = new Request(
  {
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: TIMEOUT,
    withCredentials: true, // 跨域安全策略
    headers: {
      'Cache-Control': 'no-cache'
    },
  }
)
export default function (project) {
  function request(config) {
    return service.instance.request(config)
  }
  function request2(config) {
    return service2.instance.request(config)
  }
  return {
    request,
    request2
  }
}

可以直接使用或者在层封装

 const {request2} = axios('wisdom')