在 Web 开发中，发送 HTTP 请求是非常常见的操作。而 HTTP 请求的 header 是非常重要的一部分，可以告诉服务器客户端需要的内容以及其他相关信息。在前端开发中，我们可以使用 npm 包 headers 来方便地设置 HTTP 请求的 header。
headers 的安装和引入
我们可以使用 npm 包管理工具来安装 headers：
--- ------- -------
安装完成后，我们在代码中通过 require 来引入 headers：
----- ------- - -------------------
headers 的基本用法
使用 headers 设置 HTTP 请求的 header 可以通过 headers() 方法来实现。headers() 方法接收一个对象作为参数，其中键为 header 的名称，值为 header 的值。
--------- --------------- ------------------- ---------------- ------- - - ----- ---
在这个例子中，我们设置了 Content-Type 和 Authorization 两个 header。其中，Content-Type 表示请求的内容类型是 JSON 格式，Authorization 表示使用了 OAuth2 认证，token 是我们提前获取到的 access token。
设置了 header 之后，我们还需要将其应用到 HTTP 请求中。在浏览器端，我们可以使用 fetch API 来发送 HTTP 请求，并将 headers 传递给 fetch API 的第二个参数。
------------------ -
------- -------
-------- ---------
--------------- -------------------
---------------- ------- - - -----
---
----- --------------------
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------在这个例子中，我们通过 fetch API 发送了一个 POST 请求。在 fetch API 的第二个参数中，我们设置了 headers。最后，我们将请求体中的数据使用 JSON.stringify() 方法转换成了 JSON 格式，并将其放到了请求体中。
headers 的高级用法
除了设置 header 的值之外，我们还可以通过 headers 的其他功能来进行高级应用。
1. 设置默认的 header 值
在 Web 开发中，有一些 header 的值是所有请求都需要设置的，比如 Accept 和 User-Agent。如果每次发送请求都需要手动设置这些 header 的值，显然会非常麻烦。
为了方便起见，我们可以通过 headers 的 defaults 方法来设置默认的 header 值。
------------------ --------- ------------------- ------------- ----------- ---
在这个例子中，我们设置了 Accept 和 User-Agent 两个 header 的默认值。
设置默认值之后，我们就可以不使用 headers() 方法来设置这些 header 的值了，而是可以直接使用 fetch API 发送请求：
------------------ -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
在这个例子中，我们没有手动设置任何 header 的值，但由于我们在之前设置了默认值，这些 header 依然会被包含在请求中。
2. 设定多个 header 的值
在 Web 开发中，有一些 header 的值可以接受多个参数，比如 Accept-Language。如果我们需要设置多个参数的话，就需要使用数组来表示这些值，例如：
--------- ------------------ --------- -------- ---
这样，我们就成功地设置了 Accept-Language 这个 header 的值，它包括了两个语言类型：中文和英文。
3. 操作已有的 header
在实际应用中，有时候我们需要对已有的 header 进行一些操作，比如替换、新增和删除等。headers 提供了一些方法来帮助我们完成这些操作。
- replace(name, value)：替换指定的 header 值。
- append(name, value)：向指定的 header 添加一个值，如果该 header 值已经存在，则新增的值将会被追加到已有值的后面。
- delete(name)：删除指定的 header 值。
例如，如果我们要将已有的 Accept-Language header 值替换成中文：
----- - - --------- ------------------ --------- -------- --- ---------------------------- -----------
在这个例子中，我们使用 headers() 方法设置了 Accept-Language header 的初始值，然后使用 replace() 方法将其替换为中文。
如果我们要向已有的 header 值添加一些新的参数：
----- - - --------- ------------------ --------- --- --------------------------- ---------
在这个例子中，我们使用 headers() 方法设置了 Accept-Language header 的初始值，然后使用 append() 方法向其中添加了一个新的语言类型。
如果我们要删除已有的 Accept-Language header 值：
----- - - --------- ------------------ --------- --- ----------------------------
在这个例子中，我们使用 headers() 方法设置了 Accept-Language header 的初始值，然后使用 delete() 方法将其删除。
总结
使用 headers 可以方便地设置 HTTP 请求的 header，包括设置默认值、设置多个参数的值，以及进行替换、新增和删除等操作。掌握 headers 的使用方法，可以帮助我们在 Web 开发中更加方便地发送和处理 HTTP 请求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb8acb5cbfe1ea0611839