axios请求拦截

在使用vue的开发中，我们会使用axios来做前后端通信，那这时候我们就需要对请求前后做拦截，处理一些通用的错误

import axios from 'axios'
import ElementUI from 'element-ui';
import store from './store'
import router from './router'
// 配置开发环境还是生产环境
axios.defaults.baseURL = process.env.NODE_ENV === "development"?'http://localhost:9000/':'http://localhost:9100/'

//axios请求前拦截
axios.interceptors.request.use((config) => {
    // console.log('config',config)
    return config
})

// axios请求后拦截
axios.interceptors.response.use(
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    (response) => {
        const res = response.data
        if(res.code==200){
            return response
        }else{
            ElementUI.Message({
                showClose: true,
                message: response.data.msg,
                type: 'error'
            });
            // 直接拒绝往下面返回结果信息
            return Promise.reject(response.data.msg)
        }
    },
    // 否则的话抛出错误
    (error)=>{
        // console.log('error1',error.response)
        if(error.response.data){
            error.message = error.response.data.msg
        }
        // 根据请求状态觉得是否登录或者提示其他
        if(error.response.status===401){
            store.commit("REMOVE_INFO")
            router.push('/login')
            error.message="请重新登录"
        }else if(error.response.status===403){
            error.message="权限不足，无法访问"
        }
        ElementUI.Message({
            showClose: true,
            message: error.message,
            type: 'error'
        });
        return Promise.reject(error)
    }
)