axios create拦截_axios拦截器配置

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

axios.create() // 创建axios的一个实例,该实例有get和post的方法

process.env.VUE_APP_URL

如果是开发环境,它的值是根目录下.env.development -> VUE_APP_URL对应的值

如果是生成环境,它的值是根目录下.env.production -> VUE_APP_URL对应的值

service.interceptors.request.use() // 配置请求之前的拦截操作

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