為什么`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'); })();