axios封装

axios封装（vue3项目）

我们在使用axios的时候，一般需要在request中统一封装拦截器，处理一些请求头带token和时间格式

/**
 * axios二次封装
 */
import axios from 'axios'
import config from '../config'
import { ElMessage  } from 'element-plus'
const TOKEN_INVALID = 'Token认证失败，请重新登录'
const NETWORK_ERROR = '网络请求异常，请稍后重试'
import router from './../router'
// 创建axios实例对象，添加全局配置
const service = axios.create({
    baseURL:config.baseURL,
    timeout:8000
})

// 请求拦截
service.interceptors.request.use((req)=>{
    // 也可以处理一些时间戳格式
    const headers = req.headers
    if(!headers.Authorization){
        headers.Authorization = 'Bear token'
    }
    return req;
})

// 响应拦截
service.interceptors.response.use((res)=>{
    const {code,data,msg} = res.data;
    
    if(code === 200){
        return data;
    }else if(code === 40001){
        // 登录过期或者失效
        ElMessage.error(TOKEN_INVALID);
        setTimeout(() => {
            router.push('/login')
        }, 1500);
        return Promise.reject(TOKEN_INVALID)
    }else{
        ElMessage.error(msg || NETWORK_ERROR);
        return Promise.reject(TOKEN_INVALID)
    }
})

/**
 * 请求的核心函数
 * @param {*} options 请求配置
 */
function request(options) {
    options.method = options.method || 'get'
    if(options.method.toLowerCase() === 'get'){
        options.params = options.data
    }
    if(config.env === 'prod'){
        service.defaults.baseURL = config.baseApi
    }else{
        service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
    }
    return service(options)
}
['get','post','put','delete','patch'].forEach((item)=>{
    request[item] = (url,data,options)=>{
        return request({
            url,data,...options,method:item
        })
    }
})
export default request

我们在调用的时候就可以先全局挂载$request,

// 挂载在全局vue2
// app.config.globalProperties.$request = request
// 挂载在全局vue3
window.$request = request

组件内部调用的方式：

//vue3中setup中没有this
$request.get('/login',{name:'jack'},{mock:true}).then((res)=>{
  console.log(res);
})