Axios拦截器(Interceptors)
- 作用:将 axios 中共有的参数,响应公共处理交给拦截器处理,减少axios发送请求时的代码冗余。
- 主要分为两种:
- 请求拦截器:请求拦截器作用是在发出请求时,拦截下用户的请求,执行完一系列处理再发送出去(一般用与添加cookie、token,请求头等)。
- 响应拦截器:当服务器产生响应时,对响应数据进行拦截,并对拦截的数据进行处理,处理完数据再返回。列如对于成功的返回,我们只需要返回数据,或者把不需要的数据去除再返回。如果出错的话,就返回错误信息,并用message显示错误。
简单来说就是 在请求或响应被 then 或 catch 处理前拦截它们。
一、配置请求拦截器
1.创建一个axios实例对象
// 创建 axios 实例
const service = axios.create({
baseURL: 'http://127.0.0.1:8080', // 基准路径(请求路径公共部分)。将自动加载到URL前面,除非URL是一个绝对的URL。
timeout: 6000 // 请求超时时间(单位毫秒)。如果未加载成功,终止请求并返回请求超时。
})
2.配置请求拦截器(interceptor.request)
service.interceptors.request.use(
config=>{...}, // 在发送请求之前做一些事情,config是请求参数
error=>{...}, // 出现请求错误时进行的处理
}
如果你后面需要移除拦截器可以
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
service.interceptors.request.eject(myInterceptor); // eject: 开除,弹出; clear()移除全部拦截器。
3.案例
service.interceptors.request.use(
config => {
const token = sessionStorage.getItem('token') // 获取存取的token
if(token){ // 不为空的话就设置进headers
config.headers['token'] = token
}
return config
},
err => {
return Promise.reject(error)
}
)
二、配置响应拦截器
1.配置响应拦截器(interceptor.response)
service.interceptors.response.use(
response => {...}, // 对响应进行处理,response是返回数据
error => {...} // 出现请求错误时进行的处理
)
2.案例
列如当响应数据不对时:
{
"status":404,
"error":"Not Found",
"path":"/xxx",
}
可以这样写,具体要依据响应数据是怎样返回的。
service.interceptors.response.use(
response => { // 状态代码为【2xx】时将会触发此函数
return response.data
},
error => { // 状态代码超出【2xx】范围时将会触发此函数,列如:4xx、5xx、...
if (error.response) {
let data = error.response.data
switch (error.response.status) {
case 403:
console.log("拒绝访问"); // 建议使用弹窗提示
break
case 404:
console.log("很抱歉,资源未找到!");
break
// ......
default:
console.log(data.message);
break
}
}
}
)