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:$.ajaxSetupbeforeSend

    $.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回调之后)

    Popular posts from this blog

    大学资料分享——广工计院各个科目实验报告、课设及期末复习资料!!

    JAVA Traffic Signal Light Course Design (Source Code + Report + Video Demonstration)

    Win10 远程计算机或设备将不接受连接