在前端监控体系中，或许其他场景下，假如我们须要监控当前页面下一切要求状况。能够一般要求下，我们会挑选在要求的回调中去处置惩罚。这类做法的瑕玷就是会侵入详细的营业代码。在一般的监控中，监控部份的代码和营业部份的代码是星散的。另外，假如存在许多的要求须要被监听，经由历程侵入详细营业代码，为了削减代码的反复，也须要封装监听要求的逻辑。
本文经由历程monkey patches的要领完成了一个request-interceptor包,能够按需求监听要求。
该npm包的项目地点为：https://github.com/forthealll… 迎接运用。
- 猎取API要求的状况和效果
- monkey patches完成监控XMLHttpRequest要求
- monkey patches完成监控fetch要求
本文的原文在我的博客中：https://github.com/forthealll…
迎接star
一、猎取API要乞降效果
猎取要求的体式格局包含了fetch和XMLHttpRequest。比方下面是一个XMLHttpRequest要求的例子：
var client = new XMLHttpRequest();
client.open("POST","http://10.12.72.16:8080/extraInfo" );
client.setRequestHeader("Content-Type", "application/json; charset=utf-8");
client.send(JSON.stringify({}));一般我们会经由历程client上动身的readystatechange来推断要求的状况以及获得要求的相应效果：
client.onreadystatechange = function () {
if (client .readyState==4 &&client.status==200) {
console.log(client.responseText);//
}
}XMLHttpRequest的prototype除了onreadystatechange事宜外另有其他许多事宜，比方onabout、onerror、onload、onloadstart等等事宜。假如我们要完全的监听一个要求，那末须要完成完全的完成这些事宜：
client.onabout = function(){}
client.onerror = function(){}
clinet.onload = function(){}
client.onloadstart = function(){}
....另外假如当某一个事宜发作时，须要按递次的执行一系列的函数，如许会使得事宜函数内部愈来愈庞杂，使得团体项目变的没法保护。
fetch要求也是同理,因而我们须要合理的封装监听要求的逻辑。
二、monkey patches完成监控XMLHttpRequest要求
本文不会详细引见怎样经由历程monkey patches来封装监听要求的逻辑，该逻辑已经在我的npm包中完成，详细能够参考我的开源项目：
https://github.com/forthealll…
本文只引见怎样运用，若有兴致，能够读一读详细怎样完成这个monkey patches，在目次的source文件夹中，若有疑问，能够提issue。
该npm包的包名为：req-interceptor。起首来看关于XMLHttpRequest要求怎样运用：
import { ajaxIntercept } from 'req-interceptor';
//监听
const unregister = ajaxIntercept.register({
requestAbout: function (xhr) {
// xhr is real instance of a request
console.log(xhr)
},
requestError: function (xhr) {
// xhr is real instance of a request
console.log(xhr)
},
requestLoad: function (xhr) {
// xhr is real instance of a request
console.log(xhr)
},
});
//发送要求
var client = new XMLHttpRequest();
client.open("POST","http://10.12.72.16:8080/extraInfo" );
client.setRequestHeader("Content-Type", "application/json; charset=utf-8");
client.send(JSON.stringify({}));
只须要在发送要求前先挪用ajaxIntercept.register函数传入监听的对象，该函数会返回一个作废监听的要领。
如许就监听以后的恣意要求，在ajaxIntercept.register中的现实参数的对象中，对象的属性是一个函数，参数为xhr，xhr就是一个被监听的XMLHttpRquest，因而我们能够从xhr中拿到要求的详细相应。xhr的一个例子为：
xhr = {
readyState: 4
response: "{"success":0}"
responseText: "{"success":0}"
responseType: ""
responseURL: "http://10.12.72.16:8080/extraInfo"
responseXML: null
status: 201
statusText: "Created"
timeout: 0
}假如我们在作废关于某一个要求的监听，则挪用该返回的
unregister函数，今后要求不会再被监听。
unregister();
另外我们也能够在某一个要求前增加多个监听函数：
import { ajaxIntercept } from 'req-interceptor';
//监听
const unregister1 = ajaxIntercept.register({...});
const unregister2 = ajaxIntercept.register({...});
const unregister3 = ajaxIntercept.register({...});
//要求
client.open(url,....)
假如我们想要一次性移除一切的关于要求的监听函数，能够直接挪用：
ajaxIntercept.clear();三、monkey patches完成监控fetch要求
关于fetch要求也是一样的。
import { fetchIntercept } from 'req-interceptor';
import { fetchIntercept } from 'req-interceptor';
const unregister = fetchIntercept.register({
request: function (url, config) {
// Modify the url or config here
return [url, config];
},
requestError: function (error) {
// Called when an error occured during another 'request' interceptor call
return Promise.reject(error);
},
response: function (response) {
// Modify the reponse object
return response;
},
responseError: function (error) {
// Handle an fetch error
return Promise.reject(error);
}
});
// Call fetch to see your interceptors in action.
fetch('http://google.com');差别的是，fetch不像XMLHttpRequest要求那样，能够监听完全的历程，fetch只要request、requestError、response和responseError这4个属性能够监听，离别映照要求的参数，要求失利，要求返回胜利，要求返回失利。
一样的也能够经由历程返回函数来作废监听，以及经由历程clear函数来作废一切监听函数。
