關(guān)于對(duì)async?await效率問(wèn)題的深入思考
關(guān)于async await
async await于ES2017標(biāo)準(zhǔn)引入,本身的功能是作為語(yǔ)法糖簡(jiǎn)化寫(xiě)法的。
下面列舉一個(gè)使用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) }) })
因?yàn)閜2的參數(shù)與p1的返回值有關(guān)這個(gè)例子確保了p2在p1的promise為成功的情況下再調(diào)用,確保了調(diào)用的順序,如果只有少許的順序要求,實(shí)現(xiàn)起來(lái)結(jié)構(gòu)還不至于非常復(fù)雜,如果后續(xù)需要確保多個(gè)promise的調(diào)用順序,那么就會(huì)有很多層.then去調(diào)用promise會(huì)導(dǎo)致代碼嵌套太多,可讀性差。
async await的出現(xiàn)解決了代碼可讀性的問(wèn)題。
下面是一個(gè)例子:
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)用順序。
效率問(wèn)題的思考
下面給大家看一段偽代碼:
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í)行所需的時(shí)間,總共需要40s去執(zhí)行,那么對(duì)于這個(gè)偽代碼我們可以做出優(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
這樣的話(huà)執(zhí)行時(shí)間就被優(yōu)化到了30s,我們可以看一下二者的執(zhí)行時(shí)的對(duì)比:
第一個(gè)方式
第二個(gè)方式
所以當(dāng)我們使用async await時(shí)還是要去注意一下異步代碼的調(diào)用順序,適當(dāng)?shù)膬?yōu)化可以減少程序的運(yùn)行時(shí)間,而且我們應(yīng)正確的使用async await語(yǔ)法糖,只有后續(xù)操作需要用到異步請(qǐng)求所得到的數(shù)據(jù)時(shí)才需要為異步請(qǐng)求加上await修飾確保數(shù)據(jù)能夠獲取,否則不需要加await修飾。
后續(xù)
雖然可能大家覺(jué)得這個(gè)題目比較標(biāo)題黨,但我沒(méi)有要深度剖析的意思,只是想交流討論一下,希望大家的評(píng)論還是客氣一點(diǎn)。 關(guān)于評(píng)論區(qū)有掘友指出我的理解有問(wèn)題,這里我用setTimeout控制一下Promise的返回時(shí)間,代碼如下
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后返回第一個(gè)Promise并打印5s,然后再等待3s后返回第二個(gè)Promise并打印3s, 最后再等待2s后返回第三個(gè)Promise并打印2s,總用時(shí)10s */ (async () => { await t5s() await t3s() await t2s() })() /* 這里我的理解是3個(gè)操作會(huì)依次進(jìn)入微任務(wù)池中依次執(zhí)行,因此2s后打印2s,3s后打印3s,5s后打印5s,總用時(shí)5s */ (() => { t5s() t3s() t2s() })()
總結(jié)
到此這篇關(guān)于對(duì)async await效率問(wèn)題的深入思考的文章就介紹到這了,更多相關(guān)async await效率問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 三種數(shù)組復(fù)制方法的性能對(duì)比
javascript 三種數(shù)組復(fù)制方法的性能對(duì)比,對(duì)于webkit, 使用concat; 其他瀏覽器, 使用slice.2010-01-01詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象(1)
這篇文章主要介紹了JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象,對(duì)創(chuàng)建對(duì)象進(jìn)行了詳細(xì)描述,感興趣的小伙伴們可以參考一下2015-12-12Javascript中Promise的四種常用方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Javascript中Promise的四種常用方法,分別是處理異步回調(diào)、多個(gè)異步函數(shù)同步處理、異步依賴(lài)異步回調(diào)和封裝統(tǒng)一的入口辦法或者錯(cuò)誤處理,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-07-07學(xué)好js,這些js函數(shù)概念一定要知道【推薦】
本文主要介紹了一些js函數(shù)概念,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01原生js實(shí)現(xiàn)計(jì)算購(gòu)物車(chē)總金額的示例
本文主要介紹了原生js實(shí)現(xiàn)計(jì)算購(gòu)物車(chē)總金額的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-0412個(gè)非常有創(chuàng)意的JavaScript小游戲
JavaScript 在Web開(kāi)發(fā)過(guò)程中已經(jīng)是必不可少的重要分子,他推動(dòng)著Web的交互性往越來(lái)越高的層次發(fā)展,現(xiàn)在的很多Web游戲也基于這類(lèi)語(yǔ)言開(kāi)發(fā)。2010-03-03使用Javascript判斷瀏覽器終端設(shè)備(PC、IOS(iphone)、Android)
WEB開(kāi)發(fā)中如何通過(guò)Javascript來(lái)判斷終端為PC、IOS(iphone)、Android呢?可以通過(guò)判斷瀏覽器的userAgent,用正則來(lái)判斷手機(jī)是否是ios和Android客戶(hù)端,下面通過(guò)本文學(xué)習(xí)下吧2017-01-01