封装axios

引入axios

import axios from 'axios'

创建axios实例

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

请求拦截

​ 先创建一下axios 然后添加请求的拦截器，请求的拦截器先判断localstorage有没有token 通过storage.getItem()读取，并赋值，

然后会把headers.Authorization字段设置成’Bearer’ + token

service.interceptors.request.use((req) => {
    const headers = req.headers;
    const { token = "" } = storage.getItem('userInfo') || {};
    if (!headers.Authorization) headers.Authorization = 'Bearer ' + token;
    return req;
})
//请求拦截

响应拦截

判断状态码 如果通过就返回数据，如果token过期就会跳转回登陆页面

返回Promise.reject(TOKEN_INVALID)方便调用时处理回调

别的状态的话就提示错误信息，或者提示网络不佳 并且返回Promise.reject(msg||NETWORK_ERROR)，可以定义一些关键字来更好的响应。

const TOKEN_INVALID = 'Token认证失败,请重新登录'
const NETWORK_ERROR = '网络请求异常，请稍后重试'
service.interceptors.response.use((res) => {
    const { code, data, msg } = res.data;
    if (code === 200) {
        return data;
    } else if (code === 500001) {
        ElMessage.error(TOKEN_INVALID)
        setTimeout(() => {
            router.push('/login')
        }, 1500)
        return Promise.reject(TOKEN_INVALID)
    } else {
        ElMessage.error(msg || NETWORK_ERROR)
        return Promise.reject(msg || NETWORK_ERROR)
    }
})

定义request函数

​ request函数传入一个配置项，因为之前已经定义过baseUrl，所以里面只需要包含要跳转的url,发送的数据，请求的方法，还有其他配置项，比如说因为实际业务中前端经常需要mock数据，所以添加一个属性mock，设置为true的时候需要修改一下service.default.baseURL=‘’;如果需要传参数，那么可以设置一下params字段，将params字段设置成options.data

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)
}

​ 但是调用的时候传入配置项实际上是一件很不方便的事，我们可以不传入每个配置项的值，通过定义默认值的方式来实现少传参数，但是传入的参数需要写成对象的字符串形式，非常不方便，所以我们可以定义一些更为简单的方式来达到这个效果，

​ 较为常见的一种方式是 定义一些函数request.get(arguement[])，request.post(arguement[])…如果一个一个方法的调用那么需要产生很多重复的内容，所以我采用了数组的forEach方法来低耦合的达到这个效果。

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