await和promise結合使用的問題

await和promise結合使用的問題

由於目前(2020)的情況, 我們寫東西的時候, 通過 babel 的轉譯(transpile), await 和 async 和 promise 經常會有一起的情況.

工作中直接跟蹤代碼, 發現有一些序列上的問題需要注意

比如, 多個promise一起並行的情況

new Promise(rel=>rel('ok1')).then(d=>console.log(d)).then(d=>console.log(1));
new Promise(rel=>rel('ok2')).then(d=>console.log(d)).then(d=>console.log(2));

這種情況下, 我們的執行, 並不是 首先執行完第一個 promise, 而是按照 微隊列的進入順序, 依次進行執行

執行結果

'ok1'
'ok2'
1
2

但是如果我們使用了 await 的時候, 情況確有些差別

async function withawait(){
    await new Promise(rel=>rel('ok1')).then(d=>console.log(d)).then(d=>console.log(1));

    /*await //可以沒有*/ new Promise(rel=>rel('ok2')).then(d=>console.log(d)).then(d=>console.log(2));
}

withawait()

執行結果

'ok1'
1
'ok2'
3

其實我們從語義上去理解, await 就是要讓后邊等待我后邊的異步隊列進行執行完成, .then 也是返回的異步隊列.

默認的情況下, 我們的 async 和 await 修飾后的方法是直接返回一個 promise 的.

比如

async function retPromise(){
    return await 2;
}

retPromise() instanceof Promise // true

總結: js 是快速發展的, 隊列,異步也是js的核心. 需要對其中有一些基本的理解才能夠更好的運用.