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