JavaScript - Async function 和 Await

Async function 和 Await 兩者建構於 Promise 之上。

Sync (同步) / Async (非同步)

Sync (同步) : 依序等待執行，一次執行完一件事，才能繼續往下執行。
Async (非同步) : 可以一次處理不同需求，不須等待事件執行完畢才往下執行。

Async function

async function 用來定義一個非同步函式

await

運行在 async function 內，用來暫停非同步函式的運行，直到非同步進入 resolve (解決) 或 reject (出錯) 才會進入下一步。

例:

function promiseFn(num, s) {                           //Promise 函式
    return new Promise(function (resolve) {            // 回傳一個 promise
        setTimeout(resolve(`第 ${num} 輸出`), s);      // 等待多少秒之後 resolve()
    });
}

promiseFn(1, 200)
.then(resolve => {                // 使用 then 來接收
    console.log(resolve);
    return promiseFn(2, 200);     // 使用 return 來鏈接
}).then(resolve => {
    console.log(resolve);
    return promiseFn(3, 200);
}).then(resolve => {
    console.log(resolve);
})

也可以:

function promiseFn(num, s) {
    return new Promise(function (resolve) {            // 回傳一個 promise
        setTimeout(resolve(`第 ${num} 輸出`), s);      // 等待多少秒之後 resolve()
    });
}

async function delayFn() {                            // 回傳後才會往下依序執行
    const data1 = await promiseFn(1, 200);
    const data2 = await promiseFn(2, 200);
    const data3 = await promiseFn(3, 200);
    console.log(data1, data2, data3);
};
delayFn();