简介
lws-request-monitor是一个可以监控请求的npm包。在开发过程中，我们经常会遇到需要查看请求的情况，lws-request-monitor可以通过精简的界面展示请求的method、url、status code等信息，方便我们进行调试和排查问题。
安装
通过npm安装：
--- ------- -------------------
使用
在项目中引入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代理要监控的接口：
----- ------- - ------------- -- ------------------------ ----- ---- -- ----
然后，可以通过http-proxy的onProxyRes方法处理代理之后的请求，并记录监控信息：
----- ------- - ------------- --
------------------------ ----- ---- -- -
-- -------
-------------------- ---------- ---- ---- -- -
-- ------
----- ----------- - -
------- -----------
---- ----------------
----------- --------------------
---------- --- -------
-------- ----
--
---------------------------
-- ------
------------------ -- -- -
------------------- - --- -------
----------------------- - ------------------- - ----------------------
---
---
---指导意义
lws-request-monitor通过封装现有的模块实现了一个小而精致的前端请求监控工具，不仅可以方便地查看请求信息，还可以帮助开发人员学习express-request-proxy和http-proxy的使用。
同时，通过深入学习lws-request-monitor的实现，还可以了解如何通过简单的代码实现常见的前端请求监控功能，提升自己的开发能力。
示例代码
----- ------- - -------------------
----- ------- - -------------------------------
-- ---------------
----- --- - ----------
-- ---------
--------------- -------------------------
----------------- ----- ---- -- -
---------- --- -------------- ----- ------ ---
--
--
-- ----
---------------- -- -- -
------------------- -- ------- -- ---- --------
---来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66836