Javascript异步函数“等待”的正确心智模型：生成器的“屈服”与“promise”。那么（）？

Question

发电商的收益和promise中的哪一个。那么（）是理解“等待”的更为正确的思维模式吗？

属性比较，通过使用调试器遍历下面的代码段来推断：

等待：

>

等待promise实现。

等待表达式将函数的其余代码包装在一个微任务中。

发电机产量：

1. yield暂停正在运行的函数的执行。发电机功能不“运行到完成”
2. yield promise确保在执行剩余代码之前已结算promise
3. yield不会包装或创建微任务

许诺然后（回调）：

1. 不会暂停正在运行的函数的执行
2. 在执行回调之前，等待promise解决
3. 创建微任务（回调）

//promise returning function
function foo(whoCalled) {
   let p = new Promise(function(resolve, reject) { 
     setTimeout( () => {
       console.log('resolving from setTimeout - called by: ' + whoCalled)
       resolve('resolve value') }, .1)
   })
   return p
}

//async await
async function asyncFunc() {
  await foo('async function')
  //rest of running function’s code…
  console.log('async function howdy')
}

//generator yield:
function* gen() {
   yield foo('generator function')
   //rest of running function’s code…
   console.log('generator function howdy')
}

//promise.then():
function thenFunc() {
   let r = foo('promise.then function').then(() => {
       //rest of running function’s code…
       console.log('promise.then() howdy')
   })
   return r
}

//main
function main() {

  //async await
  var a = asyncFunc() 
  console.log(a) //logs Promise { <pending> }
                 //the rest of the code following await foo() runs as a microtask runs once foo() resolves. The call stack was cleared.

  //generator
   var g = gen()
   console.log(g) // logs Object [Generator] {}
   var p = g.next().value
   console.log(p) //logs Promise { <pending> }
   g.next()       //the rest of the code following yield running gen function's code runs. call stack was not cleared.

   //promise.then()
   var x = thenFunc()
   console.log(x) //logs Promise { <pending> }
                   //the then(callback) microtask runs once foo() resolves. The call stack was cleared
}
main()
console.log('main is off the call stack - launch/startup macrotask completing. Event loop entering timer phase.')

除此之外，等待在引擎盖下做什么的准确心理模型是什么？

在最新ECMAScript规范中等待参考：https://www.ecma-international.org/ecma-262/10.0/index.html#await

在V8源代码中等待：https://github.com/v8/v8/blob/4b9b23521e6fd42373ebbcb20ebe03bf445494f9/src/builtins/builtins-async-function-gen.cc#L252

Answer 1

我不知道这里正确的心理模型的答案，尽管我真的很想知道。

但我觉得这很有趣

《你不知道JS》一书的作者凯尔·辛普森（Kyle Simpson）插话了Wait如何在r/Javascript reddit上工作——来源：

”这是完全不正确的。生成器不会运行到完成，大多数异步等待的引擎实现实际上将它们视为生成器。当遇到屈服时，生成器会在本地暂停...字面意思。等待使用相同的方法。"

“不，这完全是胡说八道。大多数引擎将async await视为一个生成器，它肯定会在局部出现停顿。围绕后续代码包装promise.then（）将是实现await的最幼稚、最低效的方法之一。即使引擎做到了这一点（大多数引擎没有做到）这并不意味着这是正确的思维方式。模型像屈服一样的局部停顿是合适的思维模式。"

但是，当我亲自查看ECMA脚本规范，并使用vscode nodejs调试器遍历代码时，wait似乎更类似于。然后（）

Answer 2

promise和让步不是最容易把握的，尤其是当你不知道它们在幕后是如何运作的时候。让我们从基础开始。首先要了解的是Javascript是单线程的，这意味着它只能同时做一件事。您仍然能够“一次”完成多个任务的方式是因为html" target="_blank">javascript有一个称为事件循环的东西。

事件循环基本上如下所示：

while(queue.waitForTasks()) {
   queue.performNextTask();
}

事件循环的作用是检查是否有新的“任务”供Javascript运行。如果有任务。然后执行它，直到没有更多的任务要执行为止。它将等待新的任务。这些任务存储在称为队列的东西中。

promise，异步/等待

现在我们了解了Javascript如何处理不同的任务。它如何与promise和异步/等待一起工作？promise只不过是一个任务，或者在Javascript中包含一个任务，它将被添加到队列中，并在所有任务执行完毕后执行。。then（）是一种为promise提供回调的方法，一旦调用resolve回调，promise就会执行。

wait[something]关键字告诉Javascript，嘿，把下一个[something]放在队列的末尾，等[something]有结果后再联系我。

具有async关键字的函数基本上是在告诉Javascript：这个函数是一个promise，但是要立即执行它。

使用两个不同的异步函数a和B，异步函数的流程最容易掌握/演示，如下所示：

const A = async () => {
    console.log(A: Start);
    for (var i = 0; i < 3; i++) {
        await (async () => console.log('A: ' + i));
    }
    console.log('A: Done');
}

const B = async () {
    console.log(B: Start);
    for (var i = 0; i < 3; i++) {
        await (async () => console.log('B: ' + i));
        await (async () => {/* A task without output */});
    }
    console.log('B: Done');
}

当您使用wait调用函数时，如下所示：

console.log('Executing A');
await A();
console.log('Executing B');
await B();

这将导致：

Executing A
A: Start
A: 0
A: 1
A: 2
A: Done
Executing B
B: Start
B: 0
B: 1
B: 2
B: Done

和运行：

console.log('Executing A');
A();
console.log('Executing B');
B();

将导致：

Executing A
A: Start       Note: still gets ran before Executing B
Executing B
B: Start
A: 0
B: 0
A: 1
A: 2           Note: A: 2 first because another task in B was put in the queue
A: Done
B: 1
B: 2
B: Done

了解这一点可能有助于更好地了解应用程序的流程。

产量

yield关键字类似于await，意思是“外力”控制功能继续流动的时间。在这种情况下，不是promise任务的完成，而是生成器。next（）函数

Answer 3

这不是一个或另一个。实际上这是他们两个在一起：async/等待=产生然后一个运行程序。

异步函数会被等待关键字挂起，就像生成器函数*会被收益关键字挂起一样。执行流程在控制流语句中间停止和恢复的机制完全相同。

不同之处在于这些延续是如何驱动的，以及函数返回的内容。生成器函数在调用时创建生成器对象，您必须从外部显式调用next（）方法，才能通过yield运行代码yield。另一方面，异步函数创建promise，并自行管理执行。它不等待外部next（）调用，而是尽快运行每个异步步骤。它不会从那些next（）调用返回生成的值，而是promise。resolve（）将等待的值转换为promise，并调用其方法，然后将continuation作为回调传递。当到达返回时，它不会向调用方发出“迭代结束”的信号，而是用返回值解析最初返回的promise。