在前端开发中，有时我们需要抓取HTTP请求的信息，例如URL、请求参数、响应状态、响应头等等信息。而这些信息都可以通过 HAR（HTTP Archive）格式来描述，HAR文件通常由浏览器抓取并记录HTTP请求和响应的信息。
为了更加方便地处理HAR文件，我们可以使用一款npm包——fetch-har，这样我们就可以将HAR文件转化成实用的JSON对象，方便我们进行二次处理。
fetch-har 简介
fetch-har是一个基于fetch的JavaScript库，它会在发出HTTP请求时捕获请求和响应的信息，然后将请求和响应信息按照HAR规范格式构建成一个JSON对象并返回给我们。
fetch-har支持跨域请求和HTTPS请求，并且可以替代传统的XHR请求库。
fetch-har 安装
使用npm进行安装：
npm install fetch-har
fetch-har 使用
使用fetch-har非常简单，只需要在fetch的基础上稍作修改即可。
import fetchHar from 'fetch-har'
fetchHar('https://jsonplaceholder.typicode.com/todos/1')
.then(res => console.log(res))这段代码会返回一个分析出来的HAR文件，它的结构如下所示：
-- -------------------- ---- -------
-
------ -
---------- ------
---------- -
------- ------------
---------- -------
--
---------- -
-
---------- -
--------- ------
------ -----------------------------------------------
-------------- -----------
---------- -
-
------- ----------
-------- ---------
------- ----
--------- ------------------------------
-
--
---------- -
-
------- ---------
-------- -----
--
-
------- ------------------
-------- ------ -------- ---
--
-
------- -------------
-------- ------------
-
--
-------------- --
--
----------- -
--------- ----
------------- -----
-------------- -----------
---------- ---
---------- -
-
------- ---------------
-------- ------------------ --------------
--
-
------- -----------------
-------- ----
-
-
--
---------- -
---------- ---
------ ---
---------- ---
------- ------
------- --------
---------- ------
------ --
--
------------------ --------------------------
-
-
-
-我们可以从中获取到请求的参数、响应状态、响应头等信息。
fetch-har 示例
下面是一个完整的例子，展示了如何使用fetch-har获取请求的信息。
-- -------------------- ---- -------
------ -------- ---- -----------
--------------------------------------------------------
--------- -- -
----- ------- - --------------------------
----- -------- - ---------------------------
----------------- ----------------
-------------------- -------------------
--------------------- --------------------------------- ----- -----
-------------------- --------------------
--------------------- -------- ---------------------------------- ----- -----
--------------------- ----- ----------------------------
--通过这个例子，我们可以方便地获取请求的URL、请求方法、请求头、响应状态、响应头和响应体等信息。
总结
fetch-har是一个十分实用的npm包，它能够帮助我们非常简单地获取HAR格式的请求和响应信息，并且支持跨域请求和HTTPS请求，让我们可以非常方便地进行网络请求的调试和分析，是一个前端开发必备的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb0c6b5cbfe1ea06110ea