ECMA2017中新加入了兩個關(guān)鍵字async與await

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

首先我們需要用async關(guān)鍵字，將函數(shù)標記為異步函數(shù)

async function f() {

}
f()

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

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

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

所以這里的response已經(jīng)是一個服務(wù)器返回的響應(yīng)數(shù)據(jù)了

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

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

這是因為await底層是基于promise與事件循環(huán)（event loop）機制實現(xiàn)的

await使用時的陷阱：

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

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

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

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

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

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、第二個陷阱

如果我們需要在循環(huán)中執(zhí)行異步操作，是不能夠直接調(diào)用forEach或者map這一類方法的，盡管我們在回調(diào)函數(shù)中寫了await也不行。

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

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

}
f()

如果我們希望等待循環(huán)中的異步操作都一一完成之后才繼續(xù)執(zhí)行

我們應(yīng)當使用傳統(tǒng)的for循環(huán)

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

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

這里的for循環(huán)依然會等到所有的異步操作都完成之后才會繼續(xù)向后執(zhí)行

3、第三個陷阱

我們不能在全局或者普通函數(shù)中直接使用await關(guān)鍵字

await只能用在異步函數(shù)（async function）中

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

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

參考視頻教程：https://www.bilibili.com/video/BV1WP4y187Tu/?spm_id_from=333.337.search-card.all.click&vd_source=ee0c6018997dd78957dfe36225950357 

到此這篇關(guān)于async與await異步編程的文章就介紹到這了,更多相關(guān)async與await異步編程內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論