axios在每次发送数据请求时,会首先经过请求拦截器,可以在此挂载统一的token等后才会到达服务器,服务器处理完请求要响应给浏览器时,首先经过响应拦截器才会到达,在此通常做一些响应结果的判断。
- 请求拦截器 在请求发送前进行必要操作处理,例如添加统一cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装;
- 响应拦截器 也是如此功能,只是在请求得到响应之后,对响应体的一些处理,通常是数据统一处理等,也常来判断登录失效(token失效)等。
import axios from 'axios'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 如在正确的发送axios请求之前,统一挂载请求头
// 每个axios请求发出会先经过请求拦截器,才会到服务器
//config返回的就是每次的请求配置对象
if (store.getters.token) { // 仓库中若有token,证明登陆成功,统一挂载请求头携带token
config.headers.Authorization = `Bearer ${store.getters.token}`
//config对象下有hesders就表示为请求头,对象添加方式挂载请求头数据Authorization
}
return config; //处理后的请求对象交给服务器
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error); //请求错误不发送且报错信息
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
//response返回的就是服务器的响应体
if (response.data.success) { // 借用response对象返回的值判断请求成功与否
// 每次请求成功要做的操作,比如弹框提示成功,对用户权限进行处理
} else {
// 每次请求失败要做的操作,比如弹框提示失败
// 注意:请求错误后要阻止后续页面的跳转
// return // 方法一:阻止后续代码执行,但有问题
// 方法二:手动抛出错误的promise对象 fullfiled rejected
// return new Promise((resolve, reject) => {
// reject()
// })
return Promise.reject('error') // 方法三:等于以上第二种简写
}
return response;
}, function (error) { //在此可以对token过期进行处理
//console.dir(error) //里面包含了错误的响应信息,比如借此信息来判断token过期,删除token后返回登录页功能
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
请求拦截器中config返回的请求体,携带请求头headers、请求方法、地址路径等
响应拦截器response返回的响应体中,携带config配置对象、数据响应结果以及判断成功与否的状态码
官网代码:
在请求或响应被 then 或 catch 处理前拦截它们,可复制使用,添加功能即可
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数:表示成功
// 对成功的响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
如果你稍后需要移除拦截器,可以这样:
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
可以给自定义的 axios 实例添加拦截器。
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});