javascript async/await 是如何工作的？

Question

我有一些使用 javascript async/await 的代码：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fun1()
{
     console.log("dosomething1");
     await sleep(6000);
     console.log("dosomething2");
     return "returnfromfun1";
}
console.log(fun1());
console.log("hello");

根据official document关于async/await：

一个异步函数可以包含一个等待表达式来暂停 执行异步函数并等待传递的 Promise 解决，然后恢复异步函数的执行和 返回解析后的值。

我希望得到以下输出：

dosomething1
//wait for 6 seconds
dosomething2
Promise { <state>: "fulfilled", <value>: "returnfromfun1" }
hello

但实际输出是：

dosomething1
Promise { <state>: "pending" }
hello
//wait for 6 seconds
dosomething2

似乎 fun1 在“等待”行返回。是我误解了官方文档中的描述吗？看来我从来没有得到 fun1("returnfromfun1") 的返回值。

Answer 1

您必须以稍微不同的方式阅读引用的部分：

async 函数可以包含一个 await 表达式，用于暂停 async 函数的执行

只是异步函数本身暂停执行，然后调用它的函数继续执行。

如果你想到一个同步调用堆栈，会发生什么是异步函数上下文被弹出，并存储在其他地方：

 stack: [init] -> [async] fun1 -> sleep -> setTimeout
  // The promise gets returned from sleep
 stack: [init] -> [async] fun1
 // The async function gets popped of
 stack: [init]
 hidden: [async] fun1
 // synchronous execution ends
 stack: -
 hidden: [async] fun1
 // the timer triggers, the promise gets resolved
 stack: setTimeout callback
 hidden: [async] fun1
 // synchronous execution ends
 stack: -
 hidden: [async] fun1
 // the promise resolves, the async fun1 context gets moved onto the stack
 stack: [async] fun1

fun1 似乎在“等待”行返回

是的，没错。在那一刻它返回一个promise，当异步函数返回时（在它继续执行之后）解析。

而且似乎我从来没有得到 fun1("returnfromfun1") 的返回值。

当promise解决时你可以得到它：

  fun1().then(result => console.log(result));