axios拦截器

，坦白说是第一次听说这玩意，所以资料查了好久，现在也算是明白了拦截器的作用。我的理解就是拦截每一次你的请求和响应，然后进行相应的处理。比如一些网站过了一定的时间不进行操作，就会退出登录让你重新登陆页面，当然这不用拦截器你或许也可以完成这功能，但是会很麻烦而且代码会产生大量重复，所以我们需要用到拦截器

在src目录下的api目录创建一个js文件
import axios from ‘axios’ //引入axios
//下面这两个不一定需要引入，看你项目需要拦截的时候做什么操作，但是一般都需要引入store
import store from ‘@/store/index’ //引入store
import router from ‘@/router’ //引入router
创建一个axios实例
let instance = axios.create({
headers: {
‘content-type’: ‘application/x-www-form-urlencoded’
}
})
编写请求拦截器
这个拦截器会在你发送请求之前运行
我的这个请求拦截器的功能是为我每一次请求去判断是否有token，如果token存在则在请求头加上这个token。后台会判断我这个token是否过期。

// http request 拦截器
instance.interceptors.request.use(
config => {
const token = sessionStorage.getItem(‘token’)
if (token ) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.authorization = token //请求头加上token
}
return config
},
err => {
return Promise.reject(err)
})
响应拦截器
// http response 拦截器
instance.interceptors.response.use(
response => {
//拦截响应，做统一处理
if (response.data.code) {
switch (response.data.code) {
case 1002:
store.state.isLogin = false
router.replace({
path: ‘login’,
query: {
redirect: router.currentRoute.fullPath
}
})
}
}
return response
},
//接口错误状态处理，也就是说无响应时的处理
error => {
return Promise.reject(error.response.status) // 返回接口返回的错误信息
})
最后把实例导出就行了
export default instance
在需要的页面导入就可以使用了

import instance from ‘./axios’

/* 验证登陆 */
export function handleLogin (data) {
return instance.post(’/ds/user/login’, data)
}

作者：翔阿翔阿翔
链接：https://www.jianshu.com/p/a0c67f4e145e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。