關(guān)于對async?await效率問題的深入思考

更新時間：2022年01月29日 09:47:43 作者：kamesan

這篇文章主要給大家介紹了關(guān)于對async?await效率問題的深入思考,async和await要搭配Promise使用,它進(jìn)一步極大的改進(jìn)了Promise的寫法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

關(guān)于async await

async await于ES2017標(biāo)準(zhǔn)引入，本身的功能是作為語法糖簡化寫法的。

下面列舉一個使用promise的例子：

 function myPromise(flag) {
     return new Promise((resolve, reject) => {
         if (flag) {
             return resolve(flag)
         } else {
             return reject('error')
         }
     })
 }
 // 在p1的回調(diào)調(diào)用p2
 const p1 = myPromise(1)
 p1.then(v => {
     const p2 = myPromise(2)
     p2.then(v => {
         console.log(v)
     })
 })

因為p2的參數(shù)與p1的返回值有關(guān)這個例子確保了p2在p1的promise為成功的情況下再調(diào)用，確保了調(diào)用的順序，如果只有少許的順序要求，實現(xiàn)起來結(jié)構(gòu)還不至于非常復(fù)雜，如果后續(xù)需要確保多個promise的調(diào)用順序，那么就會有很多層.then去調(diào)用promise會導(dǎo)致代碼嵌套太多，可讀性差。

async await的出現(xiàn)解決了代碼可讀性的問題。

下面是一個例子：

 function myPromise(flag) {
     return new Promise((resolve, reject) => {
         if (flag) {
             return resolve(flag)
         } else {
             return reject('error')
         }
     })
 }
 let v
 const p1 = await myPromise(1)
 p1.then(val => { v = val }) 
 const p2 = await myPromise(v)
 p2.then(val => { v = val })
 const p3 = await myPromise(v)
 p3.then(val => { v = val })
 const p4 = await myPromise(v)
 p4.then(val => { v = val })
 const p5 = await myPromise(v)
 p5.then(val => { v = val })
 const p6 = await myPromise(v)
 p6.then(val => { v = val })
 const p7 =  myPromise(v)

這樣就可以不依靠大量的.then嵌套去確保異步方法的調(diào)用順序。

效率問題的思考

下面給大家看一段偽代碼：

 function getData(url) {
     return url
 }
 ?
 function postData(url) {
     console.log(url)
 }
 ?
 let data1 = await getData('/xxx') // 操作1 需要花費(fèi)10s
 let data2 = await getData('/xxx') // 操作2 需要花費(fèi)10s
 postData(data1 + '/xxx') // 操作3 需要花費(fèi)20s
 postData(data2 + '/yyy') // 操作4 需要花費(fèi)5s

熟悉js事件循環(huán)的同學(xué)應(yīng)該能很快求出執(zhí)行所需的時間，總共需要40s去執(zhí)行，那么對于這個偽代碼我們可以做出優(yōu)化嗎？答案是可以的。

下面看一下優(yōu)化后的代碼：

 function getData(url) {
     return url
 }
 ?
 function postData(url) {
     console.log(url)
 }
 ?
 let data1 = await getData('/xxx') // 操作1 需要花費(fèi)10s
 postData(data1 + '/xxx') // 操作4 需要花費(fèi)20s
 let data2 = await getData('/xxx') // 操作2 需要花費(fèi)10s
 postData(data2 + '/yyy') // 操作3 需要花費(fèi)5s

這樣的話執(zhí)行時間就被優(yōu)化到了30s，我們可以看一下二者的執(zhí)行時的對比：

第一個方式

第二個方式

所以當(dāng)我們使用async await時還是要去注意一下異步代碼的調(diào)用順序，適當(dāng)?shù)膬?yōu)化可以減少程序的運(yùn)行時間，而且我們應(yīng)正確的使用async await語法糖，只有后續(xù)操作需要用到異步請求所得到的數(shù)據(jù)時才需要為異步請求加上await修飾確保數(shù)據(jù)能夠獲取，否則不需要加await修飾。

后續(xù)

雖然可能大家覺得這個題目比較標(biāo)題黨，但我沒有要深度剖析的意思，只是想交流討論一下，希望大家的評論還是客氣一點(diǎn)。關(guān)于評論區(qū)有掘友指出我的理解有問題，這里我用setTimeout控制一下Promise的返回時間，代碼如下

function t5s() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1)
            console.log('5s')
        }, 5000);
    })
}
function t3s() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1)
            console.log('3s')
        }, 3000);
    })
}
function t2s() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1)
            console.log('2s')
        }, 2000);
    })
}
/* 
    這里應(yīng)該是等待5s后返回第一個Promise并打印5s，然后再等待3s后返回第二個Promise并打印3s，
    最后再等待2s后返回第三個Promise并打印2s，總用時10s
*/
(async () => {
    await t5s()
    await t3s()
    await t2s()
})()
/*
    這里我的理解是3個操作會依次進(jìn)入微任務(wù)池中依次執(zhí)行，因此2s后打印2s，3s后打印3s，5s后打印5s，總用時5s
*/
(() => {
    t5s()
    t3s()
    t2s()
})()