摘要：的五種就緒狀態(tài)請(qǐng)求未初始化還沒(méi)有調(diào)用。請(qǐng)求已發(fā)送，正在處理中通?，F(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭。并且還提供了每個(gè)階段的事件如果請(qǐng)求中止，會(huì)觸發(fā)事件。網(wǎng)絡(luò)錯(cuò)誤如太多重定向會(huì)阻止請(qǐng)求完成，會(huì)觸發(fā)事件。當(dāng)?shù)却?wù)器的響應(yīng)時(shí)，對(duì)象會(huì)發(fā)生事件。

所謂web,即使你我素未謀面，便知志趣相投；足不出戶，亦知世界之大。

現(xiàn)在的web應(yīng)用，大都是通過(guò)請(qǐng)求（http）去獲取資源，拿到資源后再呈現(xiàn)給用戶，一個(gè)頁(yè)面中可以有多個(gè)這樣的請(qǐng)求。每一次請(qǐng)求的開始，等待，完成，異常都會(huì)有相應(yīng)的狀態(tài)來(lái)標(biāo)識(shí)。我們?cè)谧约旱目蚣苤型ǔ６紩?huì)使用一個(gè)全局過(guò)濾器，來(lái)攔截請(qǐng)求，目的大同小異：

在發(fā)送請(qǐng)求之前，修改請(qǐng)求參數(shù)，添加請(qǐng)求頭

請(qǐng)求發(fā)送中的進(jìn)度計(jì)算（通常是文件上傳）

請(qǐng)求出錯(cuò)后的捕獲

請(qǐng)求結(jié)束后，處理后臺(tái)返回?cái)?shù)據(jù)結(jié)構(gòu)，進(jìn)行適配

……

看看請(qǐng)求的整個(gè)流程圖：

而我們最常用的發(fā)送請(qǐng)求的便是XMLHttpRequest。

XMLHttpRequest.readyState的五種就緒狀態(tài)：

0：請(qǐng)求未初始化（還沒(méi)有調(diào)用 open()）。

1：請(qǐng)求已經(jīng)建立，但是還沒(méi)有發(fā)送（還沒(méi)有調(diào)用 send()）。

2：請(qǐng)求已發(fā)送，正在處理中（通?，F(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。

3：請(qǐng)求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒(méi)有完成響應(yīng)的生成。

4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。

并且XMLHttpRequest還提供了每個(gè)階段的事件：

abort

如果請(qǐng)求中止，會(huì)觸發(fā)abort事件。

error

網(wǎng)絡(luò)錯(cuò)誤（如太多重定向）會(huì)阻止請(qǐng)求完成，會(huì)觸發(fā)error事件。

load

當(dāng)事件完成，會(huì)觸發(fā)load事件。

loadend

當(dāng)一個(gè)請(qǐng)求完成，無(wú)論成功（load）或者不成功（abort/error）后觸發(fā)

loadstart

當(dāng)調(diào)用send()時(shí)，觸發(fā)單個(gè)loadstart事件。

progress

當(dāng)?shù)却?wù)器的響應(yīng)時(shí)，XHR對(duì)象會(huì)發(fā)生progress事件。通常每隔50毫秒左右，所以可以使用這事件給用戶反饋請(qǐng)求的進(jìn)度。

timeout

當(dāng)?shù)却?wù)器的響應(yīng)超時(shí)會(huì)觸發(fā)。

了解了XMLHttpRequest的請(qǐng)求流程后，我們就可以開始去攔截瀏覽器發(fā)出的請(qǐng)求，去做我們想做的事。

方式一：

(function (xhr) {
// Capture request before any network activity occurs:
  var send = xhr.send;
  xhr.send = function (data) {
  this.addEventListener("loadstart", onLoadStart);
  this.addEventListener("loadend", onLoadEnd);
  this.addEventListener("error", onError);
  return send.apply(this, arguments);
  };
})(XMLHttpRequest.prototype);

這種是最簡(jiǎn)單直接的方式，修改XMLHttpRequest的原型，在發(fā)送請(qǐng)求時(shí)開啟事件監(jiān)聽。大多數(shù)情況下都是沒(méi)什么大問(wèn)題的，但后來(lái)發(fā)現(xiàn)在Angular4+以上版本中這樣去攔截，請(qǐng)求觸發(fā)loadend事件后獲取到的請(qǐng)求響應(yīng)成功與否狀態(tài)始終為false，因?yàn)锳ngualr2后來(lái)的版本也使用事件監(jiān)聽來(lái)處理攔截，有些地方就沖突了。

方式二：

出現(xiàn)問(wèn)題總要解決吧，然后就采用方法一的升級(jí)版本，完全重寫XMLHttpRequest。

(function () {
  // create XMLHttpRequest proxy object
  var oldXMLHttpRequest = XMLHttpRequest;
  // define constructor for my proxy object
  window.XMLHttpRequest = function () {
    var actual = new oldXMLHttpRequest();
    var self = this;
    this.onreadystatechange = null;
    // this is the actual handler on the real XMLHttpRequest object
    actual.onreadystatechange = function () {
      if (this.readyState == 1) {
      onLoadStart.call(this);
      } else if (this.readyState == 4) {
        if(this.status==200)
           onLoadEnd.call(this);
        else{
           onError.call(this);
        }
      }
     if (self.onreadystatechange) {
        return self.onreadystatechange();
      }
    };
?
?
// add all proxy getters
["status", "statusText", "responseType", "response",
"readyState", "responseXML", "upload"
].forEach(function (item) {
  Object.defineProperty(self, item, {
  get: function () {
    return actual[item];
   },
  set: function (val) {
    actual[item] = val;
  }
  });
});
?
?
// add all proxy getters/setters
["ontimeout, timeout", "withCredentials", "onload", "onerror", "onprogress"].forEach(function (item) {
  Object.defineProperty(self, item, {
    get: function () {
      return actual[item];
    },
    set: function (val) {
      actual[item] = val;
    }
  });
});
?
?
// add all pure proxy pass-through methods
["addEventListener", "send", "open", "abort", "getAllResponseHeaders",
"getResponseHeader", "overrideMimeType", "setRequestHeader", "removeEventListener"
].forEach(function (item) {
  Object.defineProperty(self, item, {
    value: function () {
      return actual[item].apply(actual, arguments);
    }
   });
  });
  }
})();

現(xiàn)在我們可以放心的攔截瀏覽器發(fā)出的請(qǐng)求了，媽媽再也不用擔(dān)心我的學(xué)習(xí)了，哈哈。說(shuō)一千道一萬(wàn)，來(lái)點(diǎn)干貨，直接看項(xiàng)目。

傳送門：web-monitor

喜歡請(qǐng)點(diǎn)個(gè)贊唄

或者去https://github.com/kisslove/w... Star一下

或者打賞一下

再或者……

哈哈，想法有點(diǎn)多了。