也许你对 Fetch 了解得不是那么多（上）

正文

请到「今天看啥」查看全文

在一个完整的 HTTP 请求中，其实就已经包含了这四个概念。请求中有请求头和请求体，响应中有响应头和响应体。所以我们有必要了解这些概念。

Headers

为了实现头部的灵活性，能够对头部进行修改是一个非常重要的能力。Headers 属于 HTTP 中 首部 的一份子，它是一个抽象的接口，利用它可以对 HTTP 的请求头和响应头做出添加、修改和删除的操作。

下面我们先看一下它具有哪些接口：

typedef (sequence<sequence<ByteString>> or record<ByteString, ByteString>) HeadersInit;

[Constructor(optional HeadersInit init),
 Exposed=(Window,Worker)]
interface Headers {
  void append(ByteString name, ByteString value);
  void delete(ByteString name);
  ByteString? get(ByteString name);
  boolean has(ByteString name);
  void set(ByteString name, ByteString value);
  iterable<ByteString, ByteString>;
};interface Headers {
  void append(ByteString name, ByteString value);
  void delete(ByteString name);
  ByteString? get(ByteString name);
  boolean has(ByteString name);
  void set(ByteString name, ByteString value);
  iterable<ByteString, ByteString>;
};
// 来自 https://fetch.spec.whatwg.org/#headers-class
复制代码

规范中定义的接口我们可以对应着 MDN 进行查看，你可以点击 这里 更直观的看看看看它有哪些方法供我们使用。

这里我们对 Headers 的构造参数做个解释。首先参数类型为 HeadersInit ，我们再看下这个类型支持哪些类型的值。我们从规范中可以看到的定义是：

typedef (sequence<sequence<ByteString>> or record<ByteString, ByteString>) HeadersInit;
复制代码

这里我们对应到 JavaScript 这门语言，意思就是说这个对象可以是数组或者是键值对（即对象）。关于如何初始化这些参数，我们可以看下规范中定义的 流程 。

To fill a Headers object (headers) with a given object (object), run these steps:

1. If object is a sequence , then for each header in object:
   1. If header does not contain exactly two items, then throw a TypeError .
   2. Append header’s first item/header’s second item to headers.
2. Otherwise, object is a record , then for each key → value in object, append key/value to headers.

这里我需要对这个做个说明，后面对 fetch 的用法会涉及到一点以及我们看 polyfill 都会有所帮助。

• 第一种：即数组，当数据每项如果不包含两项时，直接抛出错误。然后数组第一项是 header 名，第二项是值。，最后直接通过 append 方法添加。
• 第二种：即键值对（这里指对象），我们通过循环直接取到键值对，然后通过 append 方法添加。

示例

示例代码地址： github.com/GoDotDotDot…

打开浏览器输入： http://127.0.0.1:4000/headers

那么我们该如何使用它呢？首先我们需要通过 new Headers() 来实例化一个 Headers 对象，该对象返回的是一个空的列表。在有了对象实例后，我们就可以通过接口来完成我们想要的操作，我们来一起看看下面的示例：

  function printHeaders(headers) {
    let str = '';
    for (let header of headers.entries()) {
      str += `
          <li>${header[0]}: ${header[1]}</li>
          `;
      console.log(header[0] + ': ' + header[1]);
    }
    return `<ul>
          ${str}
          </ul>`;
  }
  const headers = new Headers();
  // 我们打印下看看是否返回的是一个空的列表
  const

请到「今天看啥」查看全文