axios二次封装请求拦截和响应拦截

创建axios实例

import axios from 'axios'
// 创建axios实例对象，添加全局配置
const service = axios.create({
    baseURL: config.baseApi,
    timeout: 8000
})

请求拦截  --统一所有请求携带token

// 请求拦截
service.interceptors.request.use((req) => {
    const headers = req.headers;
    const userInfo = storage.getItem('userInfo') || {}; //该处时引入的其他模块，方便获取                                                     
                                                        //token，可自行封装
    const { token = "" } = userInfo
    if (!token) headers.Authorization = 'Bearer ' + token; //如果token存在则设置请求头字段
    return req;
})

响应拦截 

// 响应拦截
service.interceptors.response.use((res) => {
    //响应状态码为200时进入
    const { errorCode, data, errorMessage } = res.data;
    if (errorCode === 0) {
        return res.data;
    } else if (errorCode === 1000001) {  //token失效处理 状态码不一定相同
        ElMessage.error(TOKEN_INVALID)
        setTimeout(() => {
            router.push('/login')
            storage.clearAll()
        }, 1500)
        return Promise.reject(TOKEN_INVALID)
    } else {
        ElMessage.error(errorMessage || NETWORK_ERROR)
        return Promise.reject(errorMessage || NETWORK_ERROR)  //统一报错
    }
},(err) => {
    //响应状态码!==200进入
    const {errorMessage} = err.response?.data || {}
    ElMessage.error(errorMessage || NETWORK_ERROR)
    return Promise.reject(errorMessage || NETWORK_ERROR)
})

核心请求函数

function request(options) {
    options.method = options.method || 'get'
    if (options.method.toLowerCase() === 'get') {
        options.params = options.data;
    }
    let isMock = config.mock;
    if (typeof options.mock != 'undefined') {
        isMock = options.mock;
    }
    if (config.env === 'prod') {
        service.defaults.baseURL = config.baseApi
    } else {
        service.defaults.baseURL = isMock ? config.mockApi : config.baseApi
    }
    return service(options)
}

为该实例的所有方法添加

['get', 'post', 'put', 'delete', 'patch'].forEach((item) => {
    request[item] = (url, data, options) => {
        return request({
            url,
            data,
            method: item,
            ...options
        })
    }
})

export default request;  //最后暴露request

请求案例

   function login(params) {
        return request({
            url: '/admin/auth/login',
            method: 'post',
            data: params
        })
    },