等待沒有做我期望的

Question

async function doThings() {
    async function timer () {
        setTimeout(() => {
            console.log('timer!')
        }), 1000
    }
    
    async function printer () {
        console.log('printer!')
    }

    await timer()
    await printer()
}

doThings()

我認為使函數異步使其返回承諾並等待使其等待。 為什么打印機（）首先完成？

Answer 1

您的timer功能不起作用，因為 setTimeout 不返回可以等待的承諾。 您需要手動承諾它：

// set a default of 1500
function timeout(ms=1500) {
  return new Promise(resolve => setTimeout(resolve, ms));
};

async function printer() {
  console.log('printer!');
};

async function doThings() {
  await timeout(1000); // time in ms
  await printer();
};

doThings();

Answer 2

我只能看到 timer () 和 printer () 函數是異步函數，但是它們中沒有使用 await，這使得 async 關鍵字不起作用。

Answer 3

函數前面的“async”一詞意味着一件簡單的事情：函數總是返回一個 Promise。 其他值會自動包裝在已解決的 Promise 中。

現在當我們使用 don't return Promise from async function 時，javascript 解釋器會自動返回已解決的 Promise，這就是 await on timer 函數得到已解決的 Promise 並且解釋器繼續執行的原因，但是 setTimeout 仍在繼續. 所以我們必須從計時器函數返回一個 Promise，並在 setTimeout 函數中解析它，如下所示。

async function doThings() {

    async function timer() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(`timer!`);
                resolve();
            }, 1000)
        });
    }

    async function printer() {
        console.log('printer!')
    }

    await timer()
    await printer()
}

doThings()