解决 ES11 中 yield 和 async/await 嵌套的问题-JavaScript中文网-JavaScript教程资源分享门户

问题描述

在 ECMAScript 2020 (ES11) 中，我们可以使用 yield 和 async/await 来实现异步编程。但当需要在一个生成器函数中使用 yield 或者在一个异步函数中使用 async/await，并且这两者又需要相互调用时，就会产生嵌套的情况。

对于这种嵌套的情况，我们需要一些技巧来合理地处理，以保证代码的可读性和维护性。

解决方案

1. Promise 同步化

首先，我们可以将异步函数转换为 Promise 对象，并使用 await 关键字同步执行 Promise 对象的结果。

async function asyncFunc() {
  // ...
}

function* genFunc() {
  const result = await asyncFunc();
  // ...
}

2. Generator 异步化

其次，我们可以使用 yield* 关键字将嵌套的生成器函数变为异步执行。

async function asyncFunc() {
  // ...
}

function* genFunc() {
  const result = yield* asyncFunc();
  // ...
}

示例代码

下面是一个示例代码，展示了如何解决嵌套的问题。

-- -------------------- ---- -------
----- -------- ----------- -
  ------ --- ----------------- ------- -- -
    ------------- -- -
      -------------- ---- ------------
    -- ------
  ---
-

--------- --------- -
  ----- ------ - ------ ------------
  --------------------
  ----- ---------- ---- -----------
-

------ -- -- -
  ----- --------- - ----------
  ----- --------------- - ----- -----------------
  ----- ----------- - ----- ----------------------
  ----- -------------------- - ----- ----------------------------
  ----------------------------------------
-----

在这个示例代码中，我们首先定义了一个异步函数 asyncFunc，它返回一个 Promise 对象。然后我们使用 yield* 关键字将生成器函数 genFunc 变为异步执行。

最后，我们创建了一个 IIFE（Immediately Invoked Function Expression）来执行该生成器函数，并使用 await 关键字同步执行。在第一个 generator.next() 方法中，我们得到了一个 Promise 对象，其中包含了异步函数 asyncFunc 的结果。接着，在第二个 generator.next() 方法中，我们将异步函数的结果传递给了生成器函数中的 yield，从而完成了所有任务。

总结

通过以上两种解决方案，我们可以很好地解决 ES11 中关于 yield 和 async/await 嵌套的问题，尽可能地减少代码嵌套和提高代码可读性和维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65177bd895b1f8cacdfab2a8