为什么`async/await` 在我的情况下不起作用？

Question

我读过async/await ，但我有一个关键问题。 首先，我解释了一个旧示例以显示我的问题的基础，然后我问了我的确切问题。

大家都知道：

console.log('1');
console.log('2');
console.log('3'); // Ex: 123

这很简单，但在以下情况下：

console.log('1');
setTimeout(()=>{
    console.log('2');
},0);
console.log('3'); // Ex: 132

也很简单， setTimeout函数是asynchronous ， JavaScript从中跳转，解析后运行它的函数，所以我们在1和3之后看到2 。

但是，现在我读了async/await并写了一个这样的函数：

(async function test() {
    console.log('1');
    await setTimeout(()=>{
        console.log('2');
    },0);
    console.log('3');
})(); // Ex: 132

出口也是132 ，为什么？ 这是我的问题，为什么3在2之前运行？ 我期望因为async/await之后1 JavaScript 等待2然后写入3 。 为什么是132 ？

Answer 1

await仅在传递给它的值是Promise时挂起。 在您的情况下， setTimeout返回一个Number因此 await 不会等待它。

正确的代码如下：

async function test() {
    console.log('1');
    await new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('2');
            resolve()
        }, 0);
    });
    console.log('3');
}

Answer 2

因为setTimeout不返回承诺。 await x仅在x是承诺时才等待； 如果x不是承诺，它（有效地）包装在一个中，就像你有await Promise.resolve(x) 。 这意味着它后面的代码将异步运行，但会尽快运行。*

如果您想要setTimeout的承诺版本，请参阅此问题的答案。 但即便如此，您的test函数也不会使用回调，而只需等待启用承诺的超时：

 function later(delay) { return new Promise(function(resolve) { setTimeout(resolve, delay); }); } async function test() { console.log("1"); await later(10); console.log("2"); console.log("3"); } test().catch(e => console.error(e)); console.log("After the call (just to prove it does wait for the timeout after 1 and before 2");

---

* 在浏览器上，这保证在同一任务期间安排的setTimeout(..., 0)之前，因为在任务期间安排的承诺回调发生在该任务结束之后，在从队列中提取下一个任务之前（即使下一个任务是在承诺回调之前安排的）。 在这个问题的答案中更多关于这个（“宏任务”和“微任务”）。

Answer 3

您可以await返回Promise函数。 setTimeout不返回Promise 。 所以在这种情况下，在setTimeout之前使用await是没有意义的。

你可以将你的setTimeout包装成一个 Promise 并在setTimeout函数中调用 resolve。

 (async function test() { console.log('1'); await new Promise((resolve, reject) => { setTimeout(() => { console.log('2'); resolve(); // also can pass a parameter here to get it via await. },0); }); console.log('3'); })();