JS - 異步操作(Promise+then 和 async+await)

Promise

想了解Promise可傳送至：Promise

async+await

想了解async+await可傳送至：async+await

用法舉例：

//async 函數（包含函數語句、函數表達式、Lambda表達式）會傳回一個 Promise 對象，如果在函數中 return 一個直接量，async 會把這個直接量通過 Promise.resolve() 封裝成 Promise 對象。
async function testAsync() {
    return "Hello Async!"
}
console.log(testAsync()); // print：Promise { 'Hello Async!' }

// new Promise()裡面的内容會立即執行
// 為了實作調用時執行，Promise一般都作為函數的傳回值
function test() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let name = "zs";
            resolve(name);
        }, 2000);
    })
}
async function main() {
    console.log(test()); // print: Promise { <pending> }

    console.log("then(): ", test().then()); // then()傳回結果也是一個Promise

    // 以下兩種方式效果一樣：Promise + then
    // test().then((data) => {
    //     console.log(data);
    // })

    // async + await:   (其實就是Promise + then的文法糖)
    let data = await test(); // await會拿到resolve的結果，且必須用在async函數中
    console.log(data); // 兩秒後列印:zs
}
main();
// ==注意：==
// await 指令後面的 Promise 對象，運作結果可能是 rejected，是以最好把 await 指令放在 try...catch 代碼塊中。
           

因為 async 函數傳回一個 Promise 對象，是以 await 可以用于等待一個 async 函數的傳回值——這也可以說是 await 在等 async 函數，但要清楚，它等的實際是一個傳回值。注意到 await 不僅僅用于等 Promise 對象，它可以等任意表達式的結果，是以，await 後面實際是可以接普通函數調用或者直接量的。