发布一个npm包，用于监控页面中的所有API请求的状态和结果

  在前端监控系统中，或者其他场景下，如果我们需要监控当前页面下所有请求状态。可能通常请求下，我们会选择在请求的回调中去处理。这种做法的缺点就是会侵入具体的业务代码。在通常的监控中，监控部分的代码和业务部分的代码是分离的。此外，如果存在很多的请求需要被监听，通过侵入具体业务代码，为了减少代码的重复，也需要封装监听请求的逻辑。

  本文通过monkey patches的方法实现了一个request-interceptor包,可以按需求监听请求。

  该npm包的项目地址为：https://github.com/forthealllight/request-intercept 欢迎使用。

• 获取API请求的状态和结果
• monkey patches实现监控XMLHttpRequest请求
• monkey patches实现监控fetch请求

本文的原文在我的博客中：https://github.com/forthealllight/blog/issues/40

欢迎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);