axios拦截器配置

以下例子是在vue-cli3下的配置

1. axios.create() // 创建axios的一个实例,该实例有get和post的方法
2. process.env.VUE_APP_URL
   • 如果是开发环境,它的值是根目录下.env.development -> VUE_APP_URL对应的值
   • 如果是生成环境,它的值是根目录下.env.production -> VUE_APP_URL对应的值
3. service.interceptors.request.use() // 配置请求之前的拦截操作
4. service.interceptors.response.use // 请求成功之后的拦截操作

import axios from 'axios';
import store from '../store';
import router from '../router'
// 创建axios实例
const service = axios.create({
    baseURL: process.env.VUE_APP_URL, // api 的 VUE_APP_URL
    timeout: 50000 // 请求超时时间(因为需要调试后台,所以设置得比较大)
})

// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
    config => {
        console.log('config',config);
        // 给请求头添加laohu-token
        if (store.state.token) {
            config.headers['laohu-token'] = store.state.token;
        }
        return config
    },
    error => {
        console.log(error) // for debug
        Promise.reject(error)
    }
)

// response 拦截器,数据返回后进行一些处理
service.interceptors.response.use(
    response => {
        /**
         * code为非20000是抛错 可结合自己业务进行修改
         */
        const res = response.data
        if (res.code == 666) {
            return res;
        } else if (res.code == 603){
            // code为603代表token已经失效,
            // 提示用户,然后跳转到登陆页面
            router.push('/login')
        } else {
            Promise.reject(res.msg);
        }
    },
    error => {
        Promise.reject('网络异常');
    }
)
export default service