Ajax拦截器的实现

本文介绍: 使用原生 ajax与jQue ry ajax 实现拦截器的原理与方法

1. 拦截器

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

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

2.原生AJAX实现拦截器

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

    const intercept = (method, url, requestCallback, responseCallback) =&gt; {
        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 &amp;&amp; this.status === 200) {
              //响应拦截器,返回有用的data
              let response = JSON.parse(this.responseText);
              responseCallback(response.data);