处理多api请求配置,axios简单优化

发布时间 2023-11-01 17:24:46作者: 蔚蓝Azure
// 通用请求拦截器
// 处理多api请求配置,多实例
import axios from 'axios'
import { Message } from 'element-ui'
import { encrypt } from 'jsencrypt'

const { 
    VUE_APP_API_TIMEOUT,
    VUE_APP_BASE_API,
    VUE_APP_BASE_BAPI,
} = process.env;

// 添加公共请求
const interceptorsReq = (config) => {
    config.headers.Auth= token
}

// 添加公共响应拦截
const interceptorsRes = (response) => {
   loading.close();
}


const createInstance = (baseURL,interceptorsFn) => {
    const instance = axios.create({
        baseURL,
        timeout: VUE_APP_API_TIMEOUT || 30000
    });
    instance.interceptors.request.use((config) => {
        // 添加公共处理函数
        interceptorsReq(config)
        interceptorsFn.interceptorsReq(config);
        return config;
    }, (error) => {
        return Promise.reject(error);
    });

    instance.interceptors.response.use((response) => {
        // 添加公共处理函数
        interceptorsRes(response)
        interceptorsFn.interceptorsRes(response);
        return response.data;
    }, (error) => {
        return Promise.reject(error);
    });

    return instance;
};


/* 添加扩展其他处理函数 */
// 请求加密
const interceptorsEncry = (config) =>{
    if(config.data){
        config.data = {
            body:encrypt(config.data)
          }
    }
}
const interceptorsFn = {
    interceptorsReq:interceptorsEncry
    // interceptorsRes: fn...
}

// 公共api实例
export const request = createInstance(VUE_APP_BASE_API); 
// 加密api实例
export const reqEncry = createInstance(VUE_APP_BASE_BAPI,interceptorsFn);