zoukankan      html  css  js  c++  java
  • axios 源码解析(下) 拦截器的详解

    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)向服务器发送请求时,在做派发更新前会优先执行请求拦截器,等到数据接收后会执行响应拦截器,有不懂的欢迎留言!

  • 相关阅读:
    HTML5之dir属性
    IPv4地址分类及子网划分
    二叉树的3种遍历
    js的点表示法和方括号表示法
    javascript-数组的常用方法
    第一编博文——漫长编程路
    使用qemu
    initial ram disk
    qemu常见选项解析
    cp和scp
  • 原文地址:https://www.cnblogs.com/greatdesert/p/11608877.html
Copyright © 2011-2022 走看看