es7 async await底層解密

        大家寫代碼的的時候,使用async await是不是感覺很輕鬆呢,代碼簡潔明瞭,也沒有回調地獄,那麼大家想過底層是如何實現的嗎。下面我們用generyator和promise模擬實現一個類似async await的函數。         思路是這樣,首先我們要自定義一個generyator,然後獲得它的迭代器(以下簡稱爲迭代器),我們都知道迭代器會遍歷執行generyator函數,並且返回yield的值,也就是我們需要的等待執行!接着我們只需要在合適的時候,調用迭代器的next方法即可!聰明的你一定想到了,使用promise控制迭代器調用,那麼思路齊了!看到這裏,很多人會有一個問題,既然generyator函數也能實現等待,我們還要用async await。個人認爲async await有2個generyator函數沒有的優點,第一個不需要像generyator函數控制迭代器調用,畢竟底層封裝好了。第二個是語義化更強,更加簡潔明瞭!下面上我們的代碼!

        我們來一點點來拆解上面的代碼,就像我們的思路一樣!我們把generyator函數變成了構造器函數,通過閉包的形式獲得迭代器_iterator ,同時我們申明瞭一個輔助函數,用來在合適的時機調用構造函數的next方法,最下面try和catch是我們第一次調用的迭代器方法。大家注意,_iteratorRes表示每次調用迭代器返回的結果,對比上面的思路,我們希望它的value是一個promise對象,這也契合了await後面的必須是promise對象這一理論。if(_iteratorRes.done){return;}這一句代表迭代器結束,重點看下面的,我們獲得了_iteratorRes的value,然後判斷其value是不是在Promise原型上,如果在說明value也是一個promise,已經證明了上面這個結論!value因爲是promsie對象,所以調用then執行下一次迭代,同時把上一次迭代器返回的值傳入!完美的模擬了 async await底層實現!說白了,就是用promise控制generyator函數的迭代器調用。

        大家可能想着如何使用,看下面那張圖,一切盡在不言中!getAjax是遠程請求,獲得_promsie1,_promsie2的獲得依賴於_promsie1,同理_promsie3的獲得依賴_promsie2,於是你懂的,對照上面的方法,我們基本模擬了async await實現!

        

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章