Implementation of Ajax Interceptor

1. 拦截器

拦截器的设置可以让我们在发出 request 或接到 response 之前做一些事情，例如改变 response的数据格式，或是根据不同 request 来添加不同的config 等。请求拦截器的即在请求发送前进行的操作，如设置是否需要token;响应拦截器的即接收到响应后进行操作，如通过状态码设置响应失败的跳转等

若对Ajax的基本使用还不熟悉推荐先看看博客：AJAX详解

2.原生AJAX实现拦截器

需要改变send方法，XMLHttpRequest.prototype.send在其原型中重新定义了send函数。

const intercept = (method, url, requestCallback, responseCallback) => {
    let xhr = new XMLHttpRequest();
    //修改原型的open和send方法来创建请求和响应拦截器
    let open = XMLHttpRequest.prototype.open;
    let send = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.open = function () {
      requestCallback();
      open.call(this, method, url);
    };

    XMLHttpRequest.prototype.send = function () {
      //当Ajax的状态码改变时调用
      this.addEventListener('readystatechange', function () {
        //请求成功时调用，也可设置别的状态码时调用的函数
        if (this.readyState === 4 && this.status === 200) {
          //响应拦截器,返回有用的data
          let response = JSON.parse(this.responseText);
          responseCallback(response.data);
        }
      });
      send.apply(this, arguments); //改变send函数的调用对象
    };
    xhr.open();
    xhr.send();
  };

  let foo = function () {
    console.log('发送请求的操作');
  };
  let fn = function (data) {
    //对响应数据处理后的返回值
    console.log(data);
  };

  //使用
  intercept('get', 'https://reqres.in/api/products/4', foo, fn);

结果：

参考资料：
StackOverflow
可传入多个ajax拦截器的完整代码：GitHub

3.使用JQ的ajax实现拦截器

可以调用jQuery自带的api:$.ajaxSetup和beforeSend

$.ajaxSetup({
        url: 'https://reqres.in/api/users/3',//测试接口,可直接使用
        //该函数将在发送请求之前运行
        beforeSend() {
          console.log('发送请求前的操作');
        },
        dataFilter: function (data, type) {
          data = JSON.parse(data);
          console.log(data);
        //对响应数据进行处理,直接返回响应数据中有用的data
          return JSON.stringify(data.data)
        },
        success: function (data) {
            //拿到的为响应数据中的data
          console.log(data);
        },
      });
      //调用ajax,可传入自己设置的url,type,success,error,
      // 但async、headers等参数的默认值已被$.ajaxSetup()更改
      $.ajax({
        url:'https://reqres.in/api/products/3'
      });

该$.ajaxSetup()方法的设置将应用于整个页面的全局 AJAX 属性
beforeSend ：此事件在 Ajax 请求开始之前触发，允许您修改 XMLHttpRequest 对象（如设置附加标头等）
dataFilter：用于处理 XMLHttpRequest 的原始响应数据的函数。这是一个预过滤功能，用于清理响应
complete: 请求完成时要调用的函数（在执行success和error回调之后）