在前端开发过程中，加载服务器数据是必不可少的。fetch 函数是现代浏览器中使用的一种方式，它提供了一种简单、易于使用和直观的方式来发出请求和获取响应。
然而，获取服务器数据不仅仅只关心响应体，还需要看响应头，比如 token、时间戳或者版本号等等。这个时候，npm 包 fetch-json-and-header 就派上用场了。
本文将介绍 fetch-json-and-header 的使用方法，并且给出示例代码。
什么是 fetch-json-and-header？
fetch-json-and-header 是一个 npm 包，它的主要作用是在一次请求中同时获取响应体和响应头，然后将它们合并到同一个对象中。
由于 fetch 函数默认只会返回响应体，也就是 Response 对象，因此如果想要获取响应头，需要另外再调用 Response 对象的 headers 属性。fetch-json-and-header 解决了这个问题，将响应体和响应头整合在一起返回。
fetch-json-and-header 的安装
fetch-json-and-header 是一个 npm 包，因此可以在命令行中直接使用 npm 安装：
$ npm install fetch-json-and-header
fetch-json-and-header 的使用方法
fetch-json-and-header 和 fetch 的使用方式基本一致，只是多了一个 header 参数。下面是 fetch-json-and-header 的基本使用方法：
-- -------------------- ---- -------
------ ------------------ ---- ------------------------
----------------------- -------- -------
-------------- -- -
------------------------------
---------------------------
--
------------ -- -
---------------------
---其中：
- url：表示请求的 URL。
- options：表示请求参数，格式同 fetch 函数使用方法。
- header：表示请求头部信息，可选参数。
使用 fetchJsonAndHeader 后，response 对象将包含 headers 和 data 两个属性：
- headers：表示响应头部信息。
- data：表示响应体信息。
fetch-json-and-header 的示例代码
下面是一个使用 fetch-json-and-header 加载服务器数据的示例代码：
-- -------------------- ---- -------
------ ------------------ ---- ------------------------
----- --- - -----------------------------------------------
----- ------- - -
------- ------
--
----- ------ - -
--------------- ------------------
--
----------------------- -------- -------
-------------- -- -
------------------------------
---------------------------
--
------------ -- -
---------------------
---代码中，我们使用 fetchJsonAndHeader 函数发出了一个 GET 请求，并且通过 header 参数传递了 content-type 请求头信息。最终输出了响应头部信息和响应体信息。
总结
在这篇文章中，我们介绍了 npm 包 fetch-json-and-header 的安装和使用方法，它可以让我们在一次请求中同时获取响应体和响应头。同时，我们还给出了详细的示例代码，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668581e8991b448e2b2f