Fetch API：基于 Promise 的 HTTP 请求新姿势

引言

在前端开发中，我们经常需要与服务器进行通信以获取或提交数据。传统的做法是使用 XMLHttpRequest (XHR) 对象。然而，XHR 有很多缺点，例如难以使用、不直观、不支持 Promise 等。

Fetch API 是一个新的 JavaScript API，用于在客户端和服务器之间进行 HTTP 请求。它基于 Promise，因此您可以轻松处理异步请求。Fetch API 的语法非常简单，很容易上手。

Fetch API 的基本用法

要使用 Fetch API 发送一个 GET 请求，您可以使用以下代码：

fetch('https://example.com/api/users')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

这段代码首先调用 fetch() 函数发送一个 GET 请求到 https://example.com/api/users。然后，它使用 then() 方法来处理服务器的响应。如果服务器返回的状态码是 200 (OK)，那么它将使用 json() 方法将服务器返回的 JSON 数据转换为 JavaScript 对象。否则，它将抛出一个错误。

接下来，它使用另一个 then() 方法来处理转换后的 JavaScript 对象。您可以使用这个对象来做任何您想做的事情，例如将其打印到控制台或存储到数据库中。

最后，它使用 catch() 方法来处理请求过程中发生的任何错误。您可以使用这个错误对象来调试您的代码。

Fetch API 与 XHR 的比较

Fetch API 与 XHR 相比有很多优点。首先，Fetch API 的语法更加简单和直观。其次，Fetch API 基于 Promise，因此您可以更轻松地处理异步请求。第三，Fetch API 支持更多的特性，例如 CORS 和 JSON 数据。

下表总结了 Fetch API 与 XHR 的主要区别：

特性	Fetch API	XHR
语法	更简单、更直观	更复杂、更难理解
Promise	支持	不支持
CORS	支持	需要额外的配置
JSON 数据	支持	需要额外的库

Fetch API 的高级功能

Fetch API 还支持一些高级功能，例如：

• CORS：CORS (跨域资源共享) 是一种机制，允许您从不同的域请求资源。Fetch API 原生支持 CORS，因此您无需进行额外的配置。
• JSON 数据：Fetch API 可以自动将服务器返回的 JSON 数据转换为 JavaScript 对象。这使得处理 JSON 数据变得更加容易。
• 请求和响应头：Fetch API 允许您设置和获取请求和响应头。这可以用于身份验证、缓存和跟踪等目的。
• 流：Fetch API 支持流，这是一种允许您以增量方式接收数据的方式。这对于处理大型文件非常有用。

总结

Fetch API 是一种现代化的 JavaScript API，用于在客户端和服务器之间进行 HTTP 请求。它基于 Promise，因此您可以轻松处理异步请求。Fetch API 的语法非常简单，很容易上手。它还支持许多高级功能，例如 CORS 和 JSON 数据。如果您是前端开发人员，那么学习 Fetch API 将帮助您编写更强大、更可靠的网络应用程序。