摘要：的五種就緒狀態(tài)請求未初始化還沒有調用。請求已發(fā)送，正在處理中通?，F(xiàn)在可以從響應中獲取內容頭。并且還提供了每個階段的事件如果請求中止，會觸發(fā)事件。網(wǎng)絡錯誤如太多重定向會阻止請求完成，會觸發(fā)事件。當?shù)却掌鞯捻憫獣r，對象會發(fā)生事件。

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

現(xiàn)在的web應用，大都是通過請求（http）去獲取資源，拿到資源后再呈現(xiàn)給用戶，一個頁面中可以有多個這樣的請求。每一次請求的開始，等待，完成，異常都會有相應的狀態(tài)來標識。我們在自己的框架中通常都會使用一個全局過濾器，來攔截請求，目的大同小異：

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

請求發(fā)送中的進度計算（通常是文件上傳）

請求出錯后的捕獲

請求結束后，處理后臺返回數(shù)據(jù)結構，進行適配

……

看看請求的整個流程圖：

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

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

0：請求未初始化（還沒有調用 open()）。

1：請求已經(jīng)建立，但是還沒有發(fā)送（還沒有調用 send()）。

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

3：請求在處理中；通常響應中已有部分數(shù)據(jù)可用了，但是服務器還沒有完成響應的生成。

4：響應已完成；您可以獲取并使用服務器的響應了。

并且XMLHttpRequest還提供了每個階段的事件：

abort

如果請求中止，會觸發(fā)abort事件。

error

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

load

當事件完成，會觸發(fā)load事件。

loadend

當一個請求完成，無論成功（load）或者不成功（abort/error）后觸發(fā)

loadstart

當調用send()時，觸發(fā)單個loadstart事件。

progress

當?shù)却掌鞯捻憫獣r，XHR對象會發(fā)生progress事件。通常每隔50毫秒左右，所以可以使用這事件給用戶反饋請求的進度。

timeout

當?shù)却掌鞯捻憫瑫r會觸發(fā)。

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

方式一：

(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);

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

方式二：

出現(xiàn)問題總要解決吧，然后就采用方法一的升級版本，完全重寫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ā)出的請求了，媽媽再也不用擔心我的學習了，哈哈。說一千道一萬，來點干貨，直接看項目。

傳送門：web-monitor

喜歡請點個贊唄

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

或者打賞一下

再或者……

哈哈，想法有點多了。