在 JavaScript 中创建异步 HTTP 请求

由于同步请求会阻塞调用进程，直到收到结果为止，因此在构建 Web 应用时应仅使用异步 HTTP 请求。然而，异步代码编写和理解起来可能比较复杂，因为语句不会像同步操作那样按线性顺序执行。

fetch() 方法

在 JavaScript 中发送异步 HTTP 请求的最佳方式是使用 fetch() 方法。其基本用法如下：

1// 向目标 URL 发送异步 HTTP 请求
2fetch(url)
3  .then(() => {
4    // 请求成功结束时在未来某个时刻执行的代码
5  })
6  .catch(() => {
7    // 请求过程中发生错误时在未来某个时刻执行的代码
8  });

你可能会看到使用名为 XMLHttpRequest 的对象来执行 HTTP 操作的 JavaScript 代码。这是一种较旧的技术，现已由 fetch() 取代。

内部机制：Promise

当执行 fetch() 方法时，它会立即返回一个 Promise 对象，该对象是对未来可能获得结果的操作的封装。一个 Promise 处于以下三种状态之一：

• pending：初始状态，既未完成也未失败
• fulfilled：表示操作成功完成
• rejected：表示操作失败

JavaScript 中的 Promise 是一个具有 then() 和 catch() 方法的对象。当 Promise 被 fulfilled 时，会调用 then()，并传入操作的结果作为参数；当 Promise 被 rejected 时，则调用 catch()。

Promise 的一大优点是可以链式调用。以下是使用 JavaScript 执行一系列异步操作的方式：

1getData()
2  .then(a => filterData(a)) // 在 getData() 返回后异步执行
3  .then(b => processData(b)) // 在 filterData() 返回后异步执行
4  .then(c => displayData(c)) // 在 processData() 返回后异步执行

示例：获取文本文件内容

我们从一个非常简单的例子开始：显示存储在 Web 服务器上的文本文件的内容。你可以通过 这里 访问该文件，其内容如下：

C++;Java;C#;PHP

以下是使用 fetch() 在 JavaScript 中实现此功能的方法：

1fetch(
2  "https://raw.githubusercontent.com/bpesquet/thejsway/master/resources/languages.txt"
3)
4  .then(response => response.text()) // 获取并返回响应的文本内容
5  .then(text => {
6    console.log(text); // 在控制台中显示文件内容
7  });

fetch() 创建的异步 HTTP 请求的结果以 Response 对象的形式返回。该对象提供了多个方法用于处理 HTTP 请求的响应。本例中使用的 text() 方法读取响应的文本内容，并返回另一个 Promise。第二个 then() 方法负责处理该 Promise 的结果，即在控制台中显示文件的文本内容。

如需了解更多关于 Response 对象的信息，请参考 Mozilla 开发者网络。

错误处理

外部 HTTP 请求本质上容易出现错误，例如网络故障、资源缺失等。这些错误可以通过在 fetch() 调用中添加 catch() 方法来处理。最基本的错误处理方式是将错误信息记录到控制台。

1fetch("http://non-existent-resource")
2  .catch(err => {
3    console.error(err.message);
4  });