不到15行代码实现async/await

前端

2023-09-25 01:57:13

不到 15 行代码实现 Async/Await

导言

Async/await 是 JavaScript 中的强大功能，它允许开发人员编写异步代码，就好像它们是同步代码一样。通过使用 async/await，您可以使异步代码更易于理解和编写，并避免了回调地狱的困扰。

在本教程中，我们将探究如何使用不到 15 行代码实现 Async/Await。我们还将深入了解使 Async/Await 成为编写异步代码的宝贵工具背后的概念。

什么是 Generator 函数？

在深入研究 Async/Await 之前，我们首先需要了解 Generator 函数。Generator 函数是返回一个可迭代对象的函数。与普通函数不同，生成器函数在每次调用时都会暂停并返回一个值，然后稍后恢复执行并从中断处继续。

要声明 Generator 函数，请使用星号（*）表示函数。例如：

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

要迭代 Generator 函数，请使用 yield 关键字。例如：

for (const value of generateSequence()) {
  console.log(value); // 1, 2, 3
}

Async/Await 如何工作

Async/Await 构建在 Generator 函数之上。Async 函数是一个特殊的 Generator 函数，它返回一个 Promise。await 关键字暂停 Async 函数的执行，直到 Promise 解决。

当 await 一个 Promise 时，Async 函数会暂停并返回 Promise 的值。一旦 Promise 解决，Async 函数就会从暂停的地方继续执行。

示例：使用 Async/Await 获取数据

为了展示 Async/Await 的实际应用，我们创建一个示例函数来从远程 API 获取数据。

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

在此示例中，getData() 是一个 Async 函数，它调用 fetch() 函数（该函数返回一个 Promise）来获取数据。getData() 暂停执行，直到 fetch() Promise 解决，并且该函数从暂停的地方继续执行，使用 await 接收 Promise 的值。然后，getData() 再次暂停，等待 response.json() Promise 解决，并返回响应的 JSON 数据。