Fetch response.headers 属性

在处理 HTTP 请求时，了解服务器返回的数据和元数据至关重要。response.headers 是 Fetch API 提供的一个重要属性，它允许我们访问响应头信息。本章将详细介绍如何使用 response.headers 属性来获取和操作这些元数据。

访问响应头

当我们从服务器接收响应时，响应头包含了大量关于响应的信息，例如状态码、内容类型、缓存策略等。通过 response.headers 属性，我们可以轻松访问这些信息。

获取所有响应头

首先，让我们看看如何获取所有响应头。你可以使用 response.headers.entries() 方法来遍历所有的响应头键值对。

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

上述代码会打印出所有响应头的键和值。这在调试或需要检查响应头时非常有用。

检查特定的响应头

通常情况下，我们可能只需要检查某个特定的响应头。response.headers.get(key) 方法可以帮助我们实现这一点。

获取特定的响应头

假设我们需要检查响应头中的 Content-Type 和 Cache-Control，可以这样写：

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(response => {
    const contentType = response.headers.get('Content-Type');
    const cacheControl = response.headers.get('Cache-Control');

    console.log(`Content-Type: ${contentType}`);
    console.log(`Cache-Control: ${cacheControl}`);
  })
  .catch(error => console.error('Error:', error));

这种方法可以让你快速获取到所需的信息。

遍历响应头

有时候，我们可能需要对所有响应头进行一些操作，比如筛选或修改。这时可以使用 response.headers.keys() 或 response.headers.values() 方法来分别获取所有响应头的键或值。

筛选特定的响应头

以下示例展示了如何筛选出所有以 X- 开头的响应头，并打印它们：

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(response => {
    const filteredHeaders = {};

    for (let key of response.headers.keys()) {
      if (key.startsWith('X-')) {
        filteredHeaders[key] = response.headers.get(key);
      }
    }

    console.log('Filtered Headers:', filteredHeaders);
  })
  .catch(error => console.error('Error:', error));

通过这种方式，你可以更灵活地处理响应头数据。

修改响应头（不可行）

虽然 response.headers 提供了丰富的功能，但它本质上是一个只读对象，这意味着你不能直接修改响应头。如果你需要改变响应头的内容，通常需要重新创建一个响应对象。

创建新的响应对象

下面是一个示例，展示如何基于现有的响应创建一个新的响应对象，并添加或修改响应头：

// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
  .then(originalResponse => {
    // 创建一个新的响应对象
    const newHeaders = new Headers(originalResponse.headers);

    // 添加或修改响应头
    newHeaders.set('X-New-Header', 'new-value');

    // 创建新的响应对象
    const newResponse = new Response(originalResponse.body, {
      status: originalResponse.status,
      headers: newHeaders
    });

    return newResponse;
  })
  .then(newResponse => {
    console.log('New Response Headers:', newResponse.headers);
  })
  .catch(error => console.error('Error:', error));

通过这种方式，你可以实现对响应头的间接修改。

总结

本章详细介绍了如何使用 response.headers 属性来访问和操作响应头信息。通过这些方法，我们可以更好地理解和处理服务器返回的数据，从而提高应用的功能性和稳定性。希望这些技巧能帮助你在实际项目中更有效地利用 Fetch API。