在前端监控系统中，或者在其他场景中，如果我们需要监控当前页面下所有请求的状态。可能在正常的请求下，我们会选择在请求的回调中处理。这种方式的缺点是会侵入特定的业务代码。平时监控时，监控部分的代码和业务部分的代码是分开的。另外，如果需要监听的请求比较多，通过侵入具体的业务代码，为了减少代码重复，也需要对监听请求的逻辑进行封装。本文通过monkeypatches的方式实现了一个request-interceptor包，可以按需监听请求。本npm包项目地址为：https://github.com/forthealll...欢迎使用。获取API请求的状态和结果monkeypatches监控XMLHttpRequestrequestsmonkeypatches监控fetch请求请求方法包括fetch和XMLHttpRequest。例如，下面是一个XMLHttpRequest请求的例子：varclient=newXMLHttpRequest();client.open("POST","http://10.12.72.16:8080/extraInfo");client.setRequestHeader("Content-Type","application/json;charset=utf-8");client.send(JSON.stringify({}));通常我们判断请求的状态，通过客户端的readystatechange获取请求的响应结果：client.onreadystatechange=function(){if(client.readyState==4&&client.status==200){ console.log(client.responseText);// }}??XMLHttpRequest的原型除了onreadystatechange事件之外，还有很多事件，比如onabout,onerror,onload,onloadstart等。如果我们想全面监控一个请求，我们需要完整的实现这些事件：client.onabout=function(){}client.onerror=function(){}clinet.onload=function(){}client.onloadstart=function(){}....???中另外，如果一个事件发生时，需要依次执行一系列的函数，这样会使事件函数越来越复杂，使整个项目变得不可维护。fetch请求也是如此，所以我们需要合理封装监听请求的逻辑。2.Monkey补丁监控XMLHttpRequest请求。本文不会具体介绍如何通过猴子补丁封装监控请求的逻辑。这个逻辑已经在我的npm包中实现了。具体可以参考我的开源项目：https://github.com/forthealll...本文只介绍如何使用。如果你有兴趣，你可以阅读如何实现这个猴子补丁。在该目录的source文件夹下，有问题可以提issue。npm包的包名是：req-interceptor。先看看如何使用XMLHttpRequest请求：import{ajaxIntercept}from'req-interceptor';//monitoringconstunregister=ajaxIntercept.register({requestAbout:function(xhr){//xhr是请求的真实实例console.log(xhr)},requestError:function(xhr){//xhr是请求的真实实例console.log(xhr)},requestLoad:function(xhr){//xhr是请求的真实实例console.log(xhr))},});//发送请求varclient=newXMLHttpRequest();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函数传入监听对象，该函数就会返回一个unlisten的方法。这样监听后的任何请求，在ajaxIntercept.register中实参的对象中，该对象的属性是一个函数，参数是xhr，xhr是一个被监听的XMLHttpRquest，所以我们可以从中得到具体的请求xhr响应。xhr的一个例子是：xhr={readyState:4response:"{"success":0}"responseText:"{"success":0}"responseType:""responseURL:"http://10.12.72.16:8080/extraInfo"responseXML:nullstatus:201statusText:"Created"timeout:0}如果我们是取消对某个请求的监听，我们会调用返回的unregister函数，该请求将不再被监听。注销（）；此外，我们还可以在某个请求前添加多个监听函数：import{ajaxIntercept}from'req-interceptor';//monitoringconstunregister1=ajaxIntercept.register({...});constunregister2=ajaxIntercept.register({...});constunregister3=ajaxIntercept.register({...});//请求client.open(url,....)如果我们要去掉所有的监听请求函数可以直接调用：ajaxIntercept.clear();3.monkeypatches实现监控fetchrequestsfetch请求也是如此。import{fetchIntercept}from'req-interceptor';import{fetchIntercept}from'req-interceptor';constunregister=fetchIntercept.register({request:function(url,config){//在这里修改url或configreturn[url,config];},requestError:function(error){//在另一个'request'拦截器调用期间发生错误时调用returnPromise.reject(error);},response:function(response){//修改响应对象returnresponse;},responseError:function(error){//处理获取错误returnPromise.reject(error);}});//调用fetch以在action.fetch('http://google.com');不同的是，fetch不像XMLHttpRequest那样，可以监听完整的过程。fetch只能监听request、requestError、response、responseError这四个属性，分别映射request的参数。如果请求失败，则请求成功返回。请求返回失败。同样，也可以通过返回函数取消监听，使用clear函数取消所有监听功能。
