前端监控数据网络（要求阻拦）

所谓web,纵然你我素未谋面，便知志趣相投；深居简出，亦知天下之大。

01 — 为何阻拦要求

如今的web运用，大都是经由过程要求（http）去猎取资本，拿到资本后再显现给用户，一个页面中能够有多个如许的要求。每一次要求的最先，守候，完成，非常都邑有相应的状况来标识。我们在本身的框架中一般都邑运用一个全局过滤器，来阻拦要求，目标迥然不同：

• 在发送要求之前，修正要求参数，增加要求头
• 要求发送中的进度盘算（一般是文件上传）
• 要求失足后的捕捉
• 要求完毕后，处置惩罚背景返回数据结构，举行适配
• ……

看看要求的全部流程图：

而我们最经常使用的发送要求的就是XMLHttpRequest。

XMLHttpRequest.readyState的五种停当状况：

• 0：要求未初始化（还没有挪用 open()）。
• 1：要求已竖立，然则还没有发送（还没有挪用 send()）。
• 2：要求已发送，正在处置惩罚中（一般如今能够从相应中猎取内容头）。
• 3：要求在处置惩罚中；一般相应中已有部份数据可用了，然则服务器还没有完成相应的天生。
• 4：相应已完成；您能够猎取并运用服务器的相应了。

而且XMLHttpRequest还供应了每一个阶段的事宜：

• abort

  假如要求中断，会触发abort事宜。

• error

  收集毛病（如太多重定向）会阻挠要求完成，会触发error事宜。

• load

  当事宜完成，会触发load事宜。

• loadend

  当一个要求完成，不管胜利（load）或许不胜利（abort/error）后触发

• loadstart

  当挪用send()时，触发单个loadstart事宜。

• progress

  当守候服务器的相应时，XHR对象会发作progress事宜。一般每隔50毫秒摆布，所以能够运用这事宜给用户反应要求的进度。

• timeout

  当守候服务器的相应超时会触发。

02 — 怎样阻拦要求

了解了XMLHttpRequest的要求流程后，我们就能够最先去阻拦浏览器发出的要求，去做我们想做的事。

体式格局一：

(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的原型，在发送要求时开启事宜监听。大多数情况下都是没什么大问题的，但厥后发如今Angular4+以上版本中如许去阻拦，要求触发loadend事宜后猎取到的要求相应胜利与否状况一直为false，由于Angualr2厥后的版本也运用事宜监听来处置惩罚阻拦，有些处所就争执了。

体式格局二：

出现问题总要处理吧，然后就采纳要领一的晋级版本，完整重写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);
}
});
});
}
})();


03 — 项目实战

如今我们能够宁神的阻拦浏览器发出的要求了，妈妈再也不必忧郁我的进修了，哈哈。说一千道一万，来点干货，直接看项目。

传送门：web-monitor

喜好请点个赞呗

或许去https://github.com/kisslove/w&＃8230; Star一下

或许打赏一下

再或许……

哈哈，主意有点多了。