前端如何调用后端接口_手把手教前端程序员搭建前端监控系统——接口请求如何监控？...

之前的章节介绍了前端程序员如何统计静态资源加载报错，今天聊聊前端接口请求监控的问题。

可能有人会认为接口的报错应该由后台来关注，统计，并修复。 确实如此，而且后台服务有了很多成熟完善的统计工具，完全能够应对大部分的异常情况， 那么为什么还需要前端对接口请求进行监控呢。原因很简单，因为前端是bug的第一发现位置。到底是前端的问题还是后端的，程序员们也不能糊里糊涂的啊！

　　1. 我们要监控所有的接口请求

　　2. 我们要监控并记录所有接口请求的返回状态和返回结果

　　3. 我们要监控接口的报错情况，及时定位线上问题产生的原因

　　4. 我们要分析接口的性能，以辅助我们对前端应用的优化。

如何监控前端接口请求呢

一般前端请求都是用jquery的ajax请求，也有用fetch请求的，以及前端框架自己封装的请求等等。总之他们封装的方法各不相同，但是万变不离其宗，他们都是对浏览器的这个对象 window.XMLHttpRequest 进行了封装，所以前端程序员只要能够监听到这个对象的一些事件，就能够把请求的信息分离出来。

一、前端程序员如何监听ajax请求

如果你用的jquery、zepto、或者自己封装的ajax方法，就可以用如下的方法进行监听。我们监听 XMLHttpRequest 对象的两个事件 loadstart， loadend。但是监听的结果并不是像我们想象的那么容易理解，我们先看下ajaxLoadStart，ajaxLoadEnd的回调方法。

一个页面上会有很多个请求，当一个页面发出多个请求的时候，ajaxLoadStart事件被监听到，但是却无法区分出来到底发送的是哪个请求，只返回了一个内容超多的事件对象，而且事件对象的内容几乎完全一样。当ajaxLoadEnd事件被监听到的时候，也会返回一个内容超多的时间对象，这个时候事件对象里包含了接口请求的所有信息。幸运的是，两个对象是同一个引用，也就意味着，ajaxLoadStart和ajaxLoadEnd事件被捕获的时候，他们作用的是用一个对象。那我们就有办法分析出来了。

当ajaxLoadStart事件发生的时候，我们将回调方法中的事件对象全都放进数组timeRecordArray里，当ajaxLoadEnd发生的时候，我们就去遍历这个数据，遇到又返回结果的事件对象，说明接口请求已经完成，记录下来，并从数组中将该事件对象的uploadFlag属性设置为true, 代表请求已经被记录。这样我们就能够逐一分析出接口请求的内容了。

二、前端程序员如何监听fetch请求

通过第一种方法，已经能够监听到大部分的ajax请求了。然而，使用fetch请求的人越来越多，因为fetch的链式调用可以让我们摆脱ajax的嵌套地狱，被更多的人所青睐。奇怪的是，我用第一种方式，却无法监听到fetch的请求事件，这是为什么呢？

这个是fetch的一段源码， 可以看到，它创建了一个Promise, 并新建了一个XMLHttpRequest对象 var xhr =newXMLHttpRequest()。由于fetch的代码是内置在浏览器中的，它必然先用监控代码执行，所以，我们在添加监听事件的时候，是无法监听fetch里边的XMLHttpRequest对象的。怎么办呢，我们需要重写一下fetch的代码。只要在监控代码执行之后，我们重写一下fetch，就可以正常监听使用fetch方式发送的请求了。就这么简单 ：)

看一下需要监听的字段：

所有工作准备完毕，如果把收集到的日志从不同的维度展现出来。

相信通过以上前端监控方法，前端程序员就能第一时间够对前端接口报错的情况有一个清晰的了解，也能够快速的发现线上的问题。对前端监控有兴趣的朋友欢迎关注、收藏、转发、讨论。