摘要:從開始,就在引入新功能,來幫助更簡單的方法來處理異步編程,幫助我們遠離回調地獄。而則是為了更簡潔的使用而提出的語法,相比這種的實現方式,更為專注,生來就是為了處理異步編程。
從Promise開始,JavaScript就在引入新功能,來幫助更簡單的方法來處理異步編程,幫助我們遠離回調地獄。
Promise是下邊要講的Generator/yield與async/await的基礎,希望你已經提前了解了它。
在大概ES6的時代,推出了Generator/yield兩個關鍵字,使用Generator可以很方便的幫助我們建立一個處理Promise的解釋器。
然后,在ES7左右,我們又得到了async/await這樣的語法,可以讓我們以接近編寫同步代碼的方式來編寫異步代碼(無需使用.then()或者回調函數)。
兩者都能夠幫助我們很方便的進行異步編程,但同樣,這兩者之間也是有不少區別的。
GeneratorGenerator是一個函數,可以在函數內部通過yield返回一個值(此時,Generator函數的執行會暫定,直到下次觸發.next())
創建一個Generator函數的方法是在function關鍵字后添加*標識。
在調用一個Generator函數后,并不會立即執行其中的代碼,函數會返回一個Generator對象,通過調用對象的next函數,可以獲得yield/return的返回值。
無論是觸發了yield還是return,next()函數總會返回一個帶有value和done屬性的對象。
value為返回值,done則是一個Boolean對象,用來標識Generator是否還能繼續提供返回值。
P.S. Generator函數的執行時惰性的,yield后的代碼只在觸發next時才會執行
function * oddGenerator () { yield 1 yield 3 return 5 } let iterator = oddGenerator() let first = iterator.next() // { value: 1, done: false } let second = iterator.next() // { value: 3, done: false } let third = iterator.next() // { value: 5, done: true }next的參數傳遞
我們可以在調用next()的時候傳遞一個參數,可以在上次yield前接收到這個參數:
function * outputGenerator () { let ret1 = yield 1 console.log(`got ret1: ${ret1}`) let ret2 = yield 2 console.log(`got ret2: ${ret2}`) } let iterator = outputGenerator() iterator.next(1) iterator.next(2) // got ret1: 2 iterator.next(3) // got ret2: 3
第一眼看上去可能會有些詭異,為什么第一條log是在第二次調用next時才進行輸出的
這就又要說到上邊的Generator的實現了,上邊說到了,yield與return都是用來返回值的語法。
函數在執行時遇到這兩個關鍵字后就會暫停執行,等待下次激活。
然后let ret1 = yield 1,這是一個賦值表達式,也就是說會先執行=右邊的部分,在=右邊執行的過程中遇到了yield關鍵字,函數也就在此處暫停了,在下次觸發next()時才被激活,此時,我們繼續進行上次未完成的賦值語句let ret1 = XXX,并在再次遇到yield時暫停。
這也就解釋了為什么第二次調用next()的參數會被第一次yield賦值的變量接收到
因為Generator對象是一個迭代器,所以我們可以直接用于for of循環:
但是要注意的是,用作迭代器中的使用,則只會作用于yield
return的返回值不計入迭代
function * oddGenerator () { yield 1 yield 3 yield 5 return "won"t be iterate" } for (let value of oddGenerator()) { console.log(value) } // > 1 // > 3 // > 5Generator函數內部的Generator
除了yield語法以外,其實還有一個yield*語法,可以粗略的理解為是Generator函數版的[...]
用來展開Generator迭代器的。
function * gen1 () { yield 1 yield* gen2() yield 5 } function * gen2 () { yield 2 yield 3 yield 4 return "won"t be iterate" } for (let value of gen1()) { console.log(value) } // > 1 // > 2 // > 3 // > 4 // > 5模擬實現Promise執行器
然后我們結合著Promise,來實現一個簡易的執行器。
最受歡迎的類似的庫是: co
function run (gen) { gen = gen() return next(gen.next()) function next ({done, value}) { return new Promise(resolve => { if (done) { // finish resolve(value) } else { // not yet value.then(data => { next(gen.next(data)).then(resolve) }) } }) } } function getRandom () { return new Promise(resolve => { setTimeout(_ => resolve(Math.random() * 10 | 0), 1000) }) } function * main () { let num1 = yield getRandom() let num2 = yield getRandom() return num1 + num2 } run(main).then(data => { console.log(`got data: ${data}`); })
一個簡單的解釋器的模擬(僅作舉例說明)
在例子中,我們約定yield后邊的必然是一個Promise函數
我們只看main()函數的代碼,使用Generator確實能夠讓我們讓近似同步的方式來編寫異步代碼
但是,這樣寫就意味著我們必須有一個外部函數負責幫我們執行main()函數這個Generator,并處理其中生成的Promise,然后在then回調中將結果返回到Generator函數,以便可以執行下邊的代碼。
我們使用async/await來重寫上邊的Generator例子:
function getRandom () { return new Promise(resolve => { setTimeout(_ => resolve(Math.random() * 10 | 0), 1000) }) } async function main () { let num1 = await getRandom() let num2 = await getRandom() return num1 + num2 } console.log(`got data: ${await main()}`)
這樣看上去,好像我們從Generator/yield換到async/await只需要把*都改為async,yield都改為await就可以了。
所以很多人都直接拿Generator/yield來解釋async/await的行為,但這會帶來如下幾個問題:
Generator有其他的用途,而不僅僅是用來幫助你處理Promise
這樣的解釋讓那些不熟悉這兩者的人理解起來更困難(因為你還要去解釋那些類似co的庫)
async/await是處理Promise的一個極其方便的方法,但如果使用不當的話,也會造成一些令人頭疼的問題Async函數始終返回一個Promise
一個async函數,無論你return 1或者throw new Error()。
在調用方來講,接收到的始終是一個Promise對象:
async function throwError () { throw new Error() } async function returnNumber () { return 1 } console.log(returnNumber() instanceof Promise) // true console.log(throwError() instanceof Promise) // true
也就是說,無論函數是做什么用的,你都要按照Promise的方式來處理它。
Await是按照順序執行的,并不能并行執行JavaScript是單線程的,這就意味著await一只能一次處理一個,如果你有多個Promise需要處理,則就意味著,你要等到前一個Promise處理完成才能進行下一個的處理,這就意味著,如果我們同時發送大量的請求,這樣處理就會非常慢,one by one:
const bannerImages = [] async function getImageInfo () { return bannerImages.map(async banner => await getImageInfo(banner)) }
就像這樣的四個定時器,我們需要等待4s才能執行完畢:
function delay () { return new Promise(resolve => setTimeout(resolve, 1000)) } let tasks = [1, 2, 3, 4] async function runner (tasks) { for (let task of tasks) { await delay() } } console.time("runner") await runner(tasks) console.timeEnd("runner")
像這種情況,我們可以進行如下優化:
function delay () { return new Promise(resolve => setTimeout(resolve, 1000)) } let tasks = [1, 2, 3, 4] async function runner (tasks) { tasks = tasks.map(delay) await Promise.all(tasks) } console.time("runner") await runner(tasks) console.timeEnd("runner")
草案中提到過await*,但現在貌似還不是標準,所以還是采用Promise.all包裹一層的方法來實現
我們知道,Promise對象在創建時就會執行函數內部的代碼,也就意味著,在我們使用map創建這個數組時,所有的Promise代碼都會執行,也就是說,所有的請求都會同時發出去,然后我們通過await Promise.all來監聽所有Promise的響應。
結論Generator與async function都是返回一個特定類型的對象:
Generator: 一個類似{ value: XXX, done: true }這樣結構的Object
Async: 始終返回一個Promise,使用await或者.then()來獲取返回值
Generator是屬于生成器,一種特殊的迭代器,用來解決異步回調問題感覺有些不務正業了。。
而async則是為了更簡潔的使用Promise而提出的語法,相比Generator + co這種的實現方式,更為專注,生來就是為了處理異步編程。
現在已經是2018年了,async也是用了好久,就讓Generator去做他該做的事情吧。。
參考資料modern-javascript-and-asynchronous-programming-generators-yield-vs-async-await
async-function-tips
示例代碼:code-resource
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94763.html
摘要:在誕生以前,異步編程的方式大概有下面四種回調函數事件監聽發布訂閱對象將異步編程帶入了一個全新的階段,中的函數更是給出了異步編程的終極解決方案。這意味著,出錯的代碼與處理錯誤的代碼,實現了時間和空間上的分離,這對于異步編程無疑是很重要的。 寫在前面 有一個有趣的問題: 為什么Node.js約定回調函數的第一個參數必須是錯誤對象err(如果沒有錯誤,該參數就是null)? 原因是執行回調函...
摘要:因為瀏覽器環境里是單線程的,所以異步編程在前端領域尤為重要。除此之外,它還有兩個特性,使它可以作為異步編程的完整解決方案函數體內外的數據交換和錯誤處理機制。 showImg(https://segmentfault.com/img/bVz9Cy); 在我們日常編碼中,需要異步的場景很多,比如讀取文件內容、獲取遠程數據、發送數據到服務端等。因為瀏覽器環境里Javascript是單線程的,...
摘要:然而異步編程真正發展壯大,的流行功不可沒。于是從異步編程誕生的那一刻起,它就和回調函數綁在了一起。這個函數會起一個定時器,在超過指定時間后執行指定的函數。我們知道是異步編程的未來。 什么是異步(Asynchrony) 按照維基百科上的解釋:獨立于主控制流之外發生的事件就叫做異步。比如說有一段順序執行的代碼 void function main() { fA(); fB(); }...
摘要:調用棧被清空,消息隊列中并無任務,線程停止,事件循環結束。不確定的時間點請求返回,將設定好的回調函數放入消息隊列。調用棧執行完畢執行消息隊列任務。請求并發回調函數執行順序無法確定。 異步編程 JavaScript中異步編程問題可以說是基礎中的重點,也是比較難理解的地方。首先要弄懂的是什么叫異步? 我們的代碼在執行的時候是從上到下按順序執行,一段代碼執行了之后才會執行下一段代碼,這種方式...
摘要:異步編程解決方案筆記最近讀了樸靈老師的深入淺出中異步編程一章,并參考了一些有趣的文章。另外回調函數中的也失去了意義,這會使我們的程序必須依賴于副作用。 JavaScript 異步編程解決方案筆記 最近讀了樸靈老師的《深入淺出NodeJS》中《異步編程》一章,并參考了一些有趣的文章。在此做個筆記,記錄并鞏固學到的知識。 JavaScript異步編程的兩個核心難點 異步I/O、事件驅動使得...
閱讀 1951·2021-09-07 09:59
閱讀 2520·2019-08-29 16:33
閱讀 3688·2019-08-29 16:18
閱讀 2849·2019-08-29 15:30
閱讀 1678·2019-08-29 13:52
閱讀 2035·2019-08-26 18:36
閱讀 530·2019-08-26 12:19
閱讀 694·2019-08-23 15:23