在前端开发过程中，我们经常需要与后端服务进行交互，通过 HTTP 协议进行通信。当我们在开发以及在生产环境中遇到问题时，我们需要对 HTTP 请求和响应的情况进行排查。因此，在我们的前端应用程序中添加 HTTP 日志记录是非常有用的。
接下来我们将详细介绍如何在前端应用程序中实现 HTTP 请求和响应的日志记录。
拦截 HTTP 请求和响应并记录日志
在前端中，我们可以使用 XMLHttpRequest 对象来发起 HTTP 请求。当一个 HTTP 请求发送到服务端并获得响应时，我们可以通过 XMLHttpRequest 对象的 onreadystatechange 事件来捕获它。
在代码的示例中，我们使用 XMLHttpRequest 来发起 HTTP GET 请求，并在 onreadystatechange 事件中拦截 HTTP 请求和响应，记录日志。
-- -------------------- ---- -------
----- --- - --- -----------------
--------------- ---------------- ------
---------------------- - -------- -- -
-- ---------------- --- -------------------- -
--------------------- -------------- ---------------------------------------- - ---- - ----- - ------
--------------------- ---------------------------------------------------------
---------------------- ---------------------- - ---- - -------------------------- ---------- - -----------------
-
--
-----------在上述代码示例中，当请求被发送时，我们创建了一个新的 XMLHttpRequest 对象，并使用 open 方法指定了一个 HTTP GET 请求。接着，我们在 onreadystatechange 事件中拦截 HTTP 请求和响应，并记录请求和响应的相关信息。最后，通过 send 方法发送 HTTP 请求。
记录 Axios 请求和响应
在现代 Web 应用程序中，我们通常使用 Axios 库来进行 HTTP 通信。Axios 提供了一个轻松的方式来设置拦截器来捕获 HTTP 请求和响应。
在下面的代码示例中，我们使用 Axios 库来发起 HTTP GET 请求，并在拦截器中记录 HTTP 请求和响应的相关信息。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------- - --------------
-------- -------
---
---------------------------------------
-------- -------- -
--------------------- ------------------------------ -------------------------- - - ---- ----- ------------------------------- - ------
------ -------
--
-------- ------- -
------ ----------------------
--
--
----------------------------------------
-------- ---------- -
---------------------- ------------------ -------------------------------------------- - ---- - ----- - ------
--------------------- ---------------------------------------------
---------------------- ---------------------- - ---- - -------------------------- ---------- - -----------------
------ ---------
--
-------- ------- -
------ ----------------------
--
--
-------------------------------在上述代码示例中，我们首先创建了一个 Axios 实例，并在 interceptors 中设置了请求和响应的拦截器。在 request 拦截器中，我们捕获了请求并记录了相关信息。在 response 拦截器中，我们捕获了响应并记录了响应的相关信息。
总结
在本文中，我们介绍了如何在前端应用程序中实现 HTTP 请求和响应的日志记录。我们使用了 XMLHttpRequest 和 Axios 来发起 HTTP 请求，并在 onreadystatechange 事件和 interceptors 中拦截 HTTP 请求和响应，并记录请求和响应的相关信息。
当我们在开发和生产环境中遇到问题时，通过记录 HTTP 请求和响应的日志，我们可以更容易地排除问题和定位问题的原因。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460b599968c7c53b02588b7