简介
lws-request-monitor是一个可以监控请求的npm包。在开发过程中，我们经常会遇到需要查看请求的情况，lws-request-monitor可以通过精简的界面展示请求的method、url、status code等信息，方便我们进行调试和排查问题。
安装
通过npm安装：
npm install lws-request-monitor
使用
在项目中引入lws-request-monitor模块，使用monitor()方法封装需要监控的接口：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------------------- -- --------------- ----- --- - ---------- -- --------- --------------- ------------------------- ----------------- ----- ---- -- - ---------- --- -------------- ----- ------ --- -- -- -- ---- ---------------- -- -- - ------------------- -- ------- -- ---- -------- ---展开代码
访问http://localhost:3000可以看到监控界面，同时发送请求可以查看监控信息。
深入学习
lws-request-monitor在实现上是基于express-request-proxy和http-proxy实现了一个简单的前端请求监控工具。学习该工具可以扩展自己开发的前端监控工具。
express-request-proxy是一个可以代理请求的中间件，可以在接口请求之前或之后进行一些处理，并支持Promise。http-proxy则提供了一种通过http协议进行代理的方式。
在lws-request-monitor的实现中，首先使用express-request-proxy代理要监控的接口：
const monitor = (proxyRouter) => withRequest(proxyRouter, (req, res) => {});
然后，可以通过http-proxy的onProxyRes方法处理代理之后的请求，并记录监控信息：
-- -------------------- ---- ------- ----- ------- - ------------- -- ------------------------ ----- ---- -- - -- ------- -------------------- ---------- ---- ---- -- - -- ------ ----- ----------- - - ------- ----------- ---- ---------------- ----------- -------------------- ---------- --- ------- -------- ---- -- --------------------------- -- ------ ------------------ -- -- - ------------------- - --- ------- ----------------------- - ------------------- - ---------------------- --- --- ---展开代码
指导意义
lws-request-monitor通过封装现有的模块实现了一个小而精致的前端请求监控工具，不仅可以方便地查看请求信息，还可以帮助开发人员学习express-request-proxy和http-proxy的使用。
同时，通过深入学习lws-request-monitor的实现，还可以了解如何通过简单的代码实现常见的前端请求监控功能，提升自己的开发能力。
示例代码
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------------------- -- --------------- ----- --- - ---------- -- --------- --------------- ------------------------- ----------------- ----- ---- -- - ---------- --- -------------- ----- ------ --- -- -- -- ---- ---------------- -- -- - ------------------- -- ------- -- ---- -------- ---展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66836
