异步/等待：JavaScript 中的强大功能

2024-01-24 02:08:45

用 async/await 编写优雅的异步 JavaScript 代码

前言

在现代 Web 开发中，异步编程是必不可少的。它使我们能够编写响应迅速、不会阻塞用户界面的代码。async/await 是 JavaScript 中用来编写异步代码的语法糖，它可以让我们的代码更简洁、更易读。

什么是 async/await？

async/await 是 JavaScript 中用来编写异步代码的语法糖。它允许我们使用同步的写法来编写异步代码，从而使代码更易读、更易于理解。

async 函数是一个返回 Promise 的函数。当调用 async 函数时，它会返回一个 Promise 对象。如果 async 函数没有遇到任何错误，那么 Promise 对象就会被解析，并将结果作为 async 函数的返回值。如果 async 函数遇到错误，那么 Promise 对象就会被拒绝，并将错误作为 async 函数的返回值。

await 用于等待 Promise 对象被解析。当遇到 await 时，JavaScript 引擎会暂停执行当前函数，直到 Promise 对象被解析。一旦 Promise 对象被解析，JavaScript 引擎就会恢复执行当前函数，并将 Promise 对象的返回值作为 await 表达式的值。

以下是一个使用 async/await 的示例代码：

async function getUserData() {
  const response = await fetch('https://example.com/user-data');
  const data = await response.json();
  return data;
}

在这个示例中，getUserData 函数是一个 async 函数。它使用 await 关键字来等待 fetch('https://example.com/user-data') 返回的 Promise 对象被解析。一旦 Promise 对象被解析，getUserData 函数就会返回从服务器获取到的用户数据。

async/await 的优点

async/await 有很多优点，包括：

提高代码可读性 ：async/await 使得异步代码更易于阅读和理解。通过使用同步的写法，我们可以更轻松地跟踪代码的执行流程。
提高代码可维护性 ：async/await 使得异步代码更易于维护。当需要修改异步代码时，我们可以更轻松地找到需要修改的部分。
提高代码性能 ：async/await 可以帮助我们提高代码的性能。通过使用异步编程，我们可以避免阻塞用户界面，从而使应用程序更流畅。

async/await 的使用

async/await 的使用非常简单。要编写一个 async 函数，只需在函数前面加上 async 关键字即可。要等待一个 Promise 对象，只需在 Promise 对象前面加上 await 关键字即可。

以下是如何使用 async/await 来获取用户数据的示例：

async function getUserData() {
  const response = await fetch('https://example.com/user-data');
  const data = await response.json();
  return data;
}