JS 里的 Generator 函数+async 的用法<#

前端

2024-02-02 14:45:15

<#title>JS 里的 Generator 函数+async 的用法<#/title>

Generator 函数

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。Generator 函数有多种理解角度，可以看作利用 JavaScript 的迭代器生成函数。由于其独特的语法特性，可以更容易地写出异步代码。

Generator 函数与普通函数的不同之处在于，它可以暂停和恢复执行，并在每次恢复时返回一个值。在 Generator 函数中，使用 yield 将函数执行暂停，在下次调用时继续执行，并从 yield 关键字暂停的位置开始。

async 函数

async 函数是 ES7 中引入的另一种异步编程解决方案，它可以让你使用 await 关键字暂停函数执行，并等待一个异步操作完成。在 await 关键字后面可以跟一个 Promise 对象或一个可以返回 Promise 对象的表达式。

Generator 函数和 async 函数的比较

Generator 函数和 async 函数都是异步编程的解决方案，但它们之间有一些区别。

语法不同。 Generator 函数使用 yield 关键字来暂停和恢复执行，而 async 函数使用 await 关键字。
返回值不同。 Generator 函数返回一个迭代器对象，而 async 函数返回一个 Promise 对象。
适用场景不同。 Generator 函数适用于需要暂停和恢复执行的场景，例如处理事件流或生成器；而 async 函数适用于需要等待异步操作完成的场景，例如处理 HTTP 请求或读取文件。

Generator 函数 + async 的用法

Generator 函数和 async 函数可以结合使用，以实现更灵活的异步编程。例如，你可以使用 Generator 函数来生成一个异步迭代器，然后使用 async 函数来遍历这个迭代器。

使用 Generator 函数和 async 函数，可以实现更灵活的异步编程。Generator 函数返回一个迭代器，async 函数返回一个 Promise。Generator 函数中的 yield 表达式使函数的执行暂停，返回一个值，并等待下一个 yield 表达式或 async 函数调用。async 函数的 await 表达式可以暂停函数的执行，等待一个 Promise 的完成，然后返回 Promise 的结果。

使用 Generator 函数 + async 的好处：

可读性强。 Generator 函数和 async 函数都是采用暂停和恢复的方式，使得代码更易理解和调试。
效率高。 Generator 函数和 async 函数都是基于 JavaScript 的迭代器机制，实现方式轻量级，性能高。
兼容性好。 Generator 函数和 async 函数都是原生 JavaScript 特性，兼容性好，可以在所有主流浏览器和 Node.js 中使用。

以下是一个使用 Generator 函数和 async 函数实现的简单示例：

async function main() {
  const iterator = generateNumbers();

  // 等待 for-await-of 遍历完成
  for await (const number of iterator) {
    console.log(number);
  }
}

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

main();