是否等待 javascript 中的子 function

Question

有什么区别：

async function subfunc(){
    await something()
}

async function func(){
    subfunc() // subfunc is not awaited but something inside it is
}

func()

和

async function subfunc(){
    await something()
}

async function func(){

    await subfunc() // subfunc is awaited and something inside it is also
}

func()

听起来它产生了相同的结果，我哪里错了？

Answer 1

听起来它产生了相同的结果，我哪里错了？

结果非常不同。

如果没有await ，则不会等待 subfunc 返回的subfunc ，因此func无需等待 subfunc 的subfunc结算就结算其 promise。 几个后果：

• 当func的subfunc被解决时，subfunc 的工作还没有完成。
• func不能使用 subfunc 的subfunc的实现值（尽管您使用await的代码也不使用它，所以这对您来说可能无关紧要）。
• 如果subfunc的 promise 被拒绝，它不会导致拒绝func的 promise； func的 promise已经完成。 事实上，没有任何东西可以处理 subfunc 的subfunc的拒绝，这至少会触发一个关于未处理拒绝的控制台警告，或者最大可能会终止运行代码的进程（Node.js 默认情况下会这样做，因为实例）。

（关于第三个：碰巧在你给出的例子中，没有任何东西正在处理func的 promise 的拒绝，但至少调用func的代码有机会处理拒绝。没有await subfunc的 promise，调用func的代码无法避免可能的未处理拒绝。）

您可以在这两个示例中看到其中的一些内容（一定要查看真实的浏览器控制台）：

没有await ：

 function something(flag) { return new Promise((resolve, reject) => { setTimeout(() => { if (flag) { console.log("`subfunc` promise fulfilled"); resolve(); } else { console.log("`subfunc` promise rejected"); reject(new Error("Some error here")); } }, 100); }); } async function subfunc(flag) { await something(flag); } async function func(flag) { subfunc(flag); // No `await` } async function test(flag) { console.log("-"); console.log( `Calling \`func\` to test ${flag? "fulfillment": "rejection"}:` ); try { await func(flag); console.log("`func` promise fulfilled"); } catch (error) { console.log("`func` promise rejected: ", error.message); } } console.log("WITHOUT `await`:"); test(true).then(() => { setTimeout(() => { test(false); }, 500); });

 .as-console-wrapper { max-height: 100%;important; }

注意

未捕获（承诺）错误：这里有一些错误

或真实浏览器控制台中的类似内容。 那是未处理的拒绝。

随着await ：

 function something(flag) { return new Promise((resolve, reject) => { setTimeout(() => { if (flag) { console.log("`subfunc` promise fulfilled"); resolve(); } else { console.log("`subfunc` promise rejected"); reject(new Error("Some error here")); } }, 100); }); } async function subfunc(flag) { await something(flag); } async function func(flag) { await subfunc(flag); } async function test(flag) { console.log("-"); console.log( `Calling \`func\` to test ${flag? "fulfillment": "rejection"}:` ); try { await func(flag); console.log("`func` promise fulfilled"); } catch (error) { console.log("`func` promise rejected: ", error.message); } } console.log("WITH `await`:"); test(true).then(() => { setTimeout(() => { test(false); }, 500); });

 .as-console-wrapper { max-height: 100%;important; }

---

在评论中你问：

这是我不明白的，我们你在没有await的情况下执行subfunc ，无论如何都在等待something()不是吗？

这是一个很好的观察。 是的， something()在subfunc中被await ed（所以 subfunc 直到它从something()获得的subfunc稳定下来之后才稳定它的 promise），但这并不会让func等待subfunc稳定它的promise。

从主脚本调用func开始，逐步执行您的第一个代码块（ func中没有await的代码块）可能会有所帮助。 （请注意，为清楚起见，我省略了一些细节。）

1. func调用subfunc ：
   1. subfunc调用something并取回一个值，我们称之为pSomething 。 （让我们假设正常情况： pSomething是一个 promise，它仍在等待中。¹）
   2. pSomething subfunc使用await ：
      1. subfunc创建一个 promise，我们称它为pSubfunc 。
      2. await将 fulfillment 和 rejection 处理程序附加到pSomething 。 （更多关于这些处理程序稍后所做的事情。）
      3. subfunc返回pSubfunc 。
   3. 现在subfunc已经返回， func返回，因为它没有对 subfunc 的subfunc做任何事情：
      1. func创建一个 promise （我们称之为pFunc ）。
      2. func用undefined实现pFunc 。
      3. func返回pFunc 。
2. 可能没有进一步的事情发生，因为pSomething永远不会解决，但让我们假设它在某个时候得到满足：
   1. pSomething的结算调用步骤 1.2.2 中附加在subfunc中的履行处理程序。 该履行处理程序包含subfunc中await之后的（隐式）代码，即return; . 该代码用undefined满足pSubfunc 。

因此，正如您所见，您是对的pSomething由subfunc编辑，因此await在pSubfunc稳定之前pSomething稳定。 但是func不会await pSubfunc ，所以func在subfunc返回其仍然未决的pFunc时立即完成 pFunc。

这就是代码中的关键区别： func不等待subfunc完成其工作，即使subfunc等待something完成其工作。

¹如果pSomething不是 promise， await将使用它收到的非承诺值作为实现值创建并实现一个新的 promise 并使用它，这将改变上面解释中的几个小细节，但不会您的代码可以轻松观察的方式。