如何在 Javascript fetch API 中访问响应标头

在使用 Javascript 的 fetch API 发送请求并从服务器接收响应时，有时候需要访问响应标头信息。响应标头可以包含内容类型、缓存控制和验证令牌等重要信息。本篇文章将向您介绍如何在 Javascript fetch API 中访问响应标头。

使用 Response.headers 属性

Response 对象提供了一个名为 headers 的只读属性，该属性包含响应标头的所有信息。我们可以使用该属性来获取特定标头的值，如下所示：

fetch('https://api.example.com/data')
  .then(response => {
    const contentType = response.headers.get('content-type');
    console.log(contentType);
  });

在上面的示例中，我们发送了一个 GET 请求到 https://api.example.com/data，然后通过 .then 语句链来处理响应。其中，我们调用 response.headers.get('content-type') 方法来获取 content-type 标头的值，并将其存储在变量 contentType 中。最终将会输出响应的内容类型。

通过使用这种方式，我们可以轻松获取响应标头的任何值。

获取所有标头

一个更强大的方法是使用 Response.headers.entries() 方法获取所有的标头及其值。该方法返回一个迭代器，您可以使用它来遍历标头及其相应的值。以下是一个示例：

fetch('https://api.example.com/data')
  .then(response => {
    for (const [name, value] of response.headers.entries()) {
      console.log(`${name}: ${value}`);
    }
  });

这里我们创建了一个 for 循环，遍历了所有的标头及其值，并将它们打印到控制台上。

使用 Async/Await

如果您更喜欢使用 Async/Await 语法，也可以使用以下代码来访问响应标头：

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const contentType = response.headers.get('content-type');
  console.log(contentType);
}

fetchData();

这里，我们创建了一个名为 fetchData 的异步函数，该函数使用了 await 关键字等待 fetch API 的响应。然后我们使用 response.headers.get() 方法来访问 content-type 标头的值，并将其存储在变量 contentType 中。最后我们直接调用该函数。

以上就是在 Javascript fetch API 中访问响应标头的方法，希望可以帮助您更好地利用该 API。