JS中的async與await異步編程及await使用陷阱源碼分析

這篇“JS中的async與await異步編程及await使用陷阱源碼分析”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JS中的async與await異步編程及await使用陷阱源碼分析”文章吧。

ECMA2017中新加入了兩個關鍵字async與await

簡單來說它們是基于promise之上的的語法糖，可以讓異步操作更加地簡單明了

首先我們需要用async關鍵字，將函數標記為異步函數

async function f() {

}
f()

異步函數就是指：返回值為promise對象的函數
比如之前用到的fetch()就是一個異步函數，返回的是promise

在異步函數中，我們可以調用其他的異步函數，不過我們不再需要使用then，而是使用一個await。

await會等待Promise完成之后直接返回最終結果

所以這里的response已經是一個服務器返回的響應數據了

async function f() {
    const response = await fetch("http://....")
}
f()

雖然await看上去會暫停函數的執行，但在等待的過程中，js同樣可以處理其他的任務

這是因為await底層是基于promise與事件循環（event loop）機制實現的

await使用時的陷阱：

1、第一個陷阱
比如：我們分別去await這兩個異步操作

async function f() {
    const a = fetch("http://..../post/1")
    const b = fetch("http://..../post/2")
}
f()

雖然不存在邏輯錯誤
但這樣會打破這兩個fetch()操作的并行
因為我們會等到第一個任務執行完成之后才開始執行第二個任務

這里更高效的方法是將所有的Promise用Promise.all組合起來，然后再去await：

修改之后的執行效率會直接提升一倍

async function f() {
    const promiseA = fetch("http://..../post/1")
    const promiseB = fetch("http://..../post/2")

    const [a, b] = await Promise.all([promiseA,promiseB])
}
f()

2、第二個陷阱

如果我們需要在循環中執行異步操作，是不能夠直接調用forEach或者map這一類方法的，盡管我們在回調函數中寫了await也不行。

因為這里的forEach會立即返回，它并不會等到所有的異步操作都執行完畢

async function f() {
   [1,2,3].forEach(async (i) => {
    await someAsyncOperation();
   })
   console.log("done")

}
f()

如果我們希望等待循環中的異步操作都一一完成之后才繼續執行

我們應當使用傳統的for循環

async function f() {
    for( let i of [1,2,3]){
        await someAsyncOperation();
    }
   console.log("done")
}
f()

如果我們希望所有的程序并發執行，一種更炫酷的寫法就是使用for await

這里的for循環依然會等到所有的異步操作都完成之后才會繼續向后執行

3、第三個陷阱

我們不能在全局或者普通函數中直接使用await關鍵字

await只能用在異步函數（async function）中

如果我們想要在最外層中使用await，那么需要先定義一個異步函數：

使用await async可以讓我們寫出更清晰，更容易理解的異步代碼

以上就是關于“JS中的async與await異步編程及await使用陷阱源碼分析”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。