浏览器中的网络请求工具（下）：whatwg-fetch 全面解析

前端

2022-12-28 23:36:57

探索 Fetch API：浏览器网络请求的强大武器

作为现代网络开发人员，我们经常需要与服务器进行交互，以获取或提交数据。fetch API 是一个强大的工具，可以让这个过程变得既简单又高效。

1. 了解响应（Response）

fetch API 响应对象包含了服务器对请求的答复。它提供了许多有价值的信息，包括：

状态码（status code） ：表示请求是否成功（200）、未找到资源（404）或服务器错误（500）。
重定向（redirect） ：如果服务器返回 301 或 302 状态码，则表示请求的资源已被重定向到其他位置。
标头（headers） ：包含服务器返回的 HTTP 标头信息，提供有关响应的元数据。
正文（body） ：包含服务器返回的实际数据。

2. 掌握 HEAD 方法

HEAD 方法与 GET 方法类似，但它只请求服务器返回标头信息，而不返回正文。这在以下情况下非常有用：

检查资源是否存在 ：发送 HEAD 请求可以快速验证服务器上是否存在某个资源，而无需下载整个资源。
获取资源元信息 ：发送 HEAD 请求可以获取资源的元信息，如文件大小和最后修改时间。

3. 精通技巧与最佳实践

除了基本用法外，fetch API 还有一些鲜为人知的技巧和最佳实践，可以帮助你更有效地使用它：

使用 JSON ：fetch API 可以自动将 JSON 格式的正文转换为 JavaScript 对象。
使用 CORS ：跨域资源共享 (CORS) 允许你从其他域请求资源。
使用凭据 ：fetch API 可以自动发送 cookie 和其他凭据。
使用缓存 ：fetch API 可以使用缓存来减少网络请求的数量。
使用模式（mode） ：fetch API 可以使用不同的模式来发送请求，包括同源模式、跨域模式和无跨域模式。
使用 Keepalive ：fetch API 可以使用 keepalive 来保持与服务器的连接，提高性能。

4. 代码示例

下面是一个使用 fetch API 进行简单 GET 请求的代码示例：

fetch('https://example.com/api/data')
  .then(response => {
    if (response.ok) {
      // 请求成功
      response.json().then(data => {
        console.log(data);
      });
    } else {
      // 请求失败
      console.error('Error: ' + response.status);
    }
  })
  .catch(error => {
    // 网络错误
    console.error('Error: ', error);
  });