javascript - 等待破坏秩序

Question

请解释一下，为什么 await 关键字会导致 Hello World 文本被放置在中间(第一个示例)和末尾(第二个示例)输出？

第一个示例:

const getData = async() => { 
    var y = "Hello World"; 
    console.log(y); 
} 

console.log(1); 
getData(); 
console.log(2); 

第一个示例的输出:

1
Hello World
2

第二个示例:

const getData = async() => { 
    var y = await "Hello World"; 
    console.log(y); 
} 

console.log(1); 
getData(); 
console.log(2); 

第二个示例的输出:

1
2
Hello World

Answer 1

两个示例都返回一个 Promise，但是脚本引擎正在寻找一个关键的区别......其中是否有任何异步等待？在第一个示例中没有，但在第二个示例中，代码至少说有。 (尽管我可能希望任何像样的 IDE 都会提示它，因为字符串文字不是异步操作。不过，语言本身对此可以相当宽容。)

即使您在第一个示例中执行了异步操作，除非您等待它，否则周围的代码仍然会同步运行。您只是没有任何方法来观察该操作的结果(或失败)。 (好吧，您可以将 .then() 附加到它，但是为什么要使用 async？那时您将混合异步约定。)

如果您在 async 函数中调用 getData()，那么您可以等待它:

console.log(1);
await getData();
console.log(2);

或者，您也可以从返回的 promise 继续:

console.log(1);
getData().then(() => console.log(2));

或者，更详细地说(或者对于任何陷入 IE 的人):

console.log(1);
getData().then(function () {
    console.log(2);
});