axios在每次发送数据请求时,会首先经过请求拦截器,可以在此挂载统一的token等后才会到达服务器,服务器处理完请求要响应给浏览器时,首先经过响应拦截器才会到达,在此通常做一些响应结果的判断。
1.请求拦截器 在请求发送前进行必要操作处理,例如添加统一cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装;
2.响应拦截器 也是如此功能,只是在请求得到响应之后,对响应体的一些处理,通常是数据统一处理等,也常来判断登录失效(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 () {/*...*/});
仅供参考!!!