欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

axios 源码解析(下) 拦截器的详解

程序员文章站 2022-06-20 08:36:14
axios的除了初始化配置外,其它有用的应该就是拦截器了,拦截器分为请求拦截器和响应拦截器两种: 请求拦截器 ;在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。 响应拦截器 ;是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时 ......

axios的除了初始化配置外,其它有用的应该就是拦截器了,拦截器分为请求拦截器和响应拦截器两种:
  请求拦截器    ;在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。
  响应拦截器    ;是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。
请求拦截器可以在请求前拦截数据,格式:

axios.interceptors.request.use(function (config) {
    //在发送请求之前做些什么
    return config;
}, function (error) {
    //对请求错误做些什么
    return promise.reject(error);
});

请求拦截器内处理完毕后需要返回参数,也就是config这个配置参数

writer by:大沙漠 qq:22969969

响应拦截器是在接收到响应后进行一些操作,格式:

axios.interceptors.response.use(function (response) {
    //对响应数据做点什么
    return response;
}, function (error) {
    //对响应错误做点什么
    return promise.reject(error);
});

请求拦截器内处理完毕后需要返回参数1,也就是response这个响应头

拦截器设置后返回的是该拦截器在内部数组的一个索引,可以调用对应拦截器的eject(index)来移除拦截器,格式:

let id1 = axios.interceptors.request.use(function(config){        //添加一个请求拦截器
    console.log(config)
    return config;
},function(err){})
axios.interceptors.request.eject(id1)                             //移除该请求拦截器

let id2 = axios.interceptors.response.use(function(response){     //添加一个响应拦截器
    console.log(response)
    return response;
},function(err){})
axios.interceptors.response.eject(id2)                            //移除该响应拦截器

当然,我们可以同时添加一个或多个拦截器,只要将参数返回就可以了

如果在element-ui+vue的项目中,经常用到的一个场景就是通过滚动条来自动设置加载中的图标。

axios在初始化的时候调用createinstance创建实例的时候执行了一条utils.extend(instance, context);代码,这行代码执行完后返回的实例就可以通过axios.interceptors去设置拦截器了。

axios对拦截器的实现是通过./lib/core/interceptormanager模块来管理的,当我们调用axios.interceptors.request.use或者axios.interceptors.response.use添加拦截器时都会执行到interceptormanager原型上的use()方法,如下:

interceptormanager.prototype.use = function use(fulfilled, rejected) {    //添加一个新的拦截器  fulfilled:成功函数 rejected:失败函数
  this.handlers.push({                                                      //添加到this.handlers数组里面
    fulfilled: fulfilled,
    rejected: rejected
  });
  return this.handlers.length - 1;                                          //返回索引
};

就是新增到thishandlers而已,对于移除来说,是执行interceptormanager原型上的eject()方法,如下:

interceptormanager.prototype.eject = function eject(id) {               //移除一个拦截器 id:该拦截器的索引
  if (this.handlers[id]) {                                                //如果存在
    this.handlers[id] = null;                                               //则设置其为null
  }
};

就是简单的把值设置为null,然后发送axios(config)向服务器发送请求时,在做派发更新前会优先执行请求拦截器,等到数据接收后会执行响应拦截器,有不懂的欢迎留言!