JS為什么說async/await是generator的語法糖詳解
關(guān)于async的介紹,在阮一峰的ES6入門教程中說到:
async 函數(shù)是什么?一句話,它就是 Generator 函數(shù)的語法糖。
可是,為什么這么說呢?
首先,比如說有一個異步操作,使用 async/await 語法來以同步模擬異步操作。
使用 async/await 實(shí)現(xiàn)一個 sleep 的功能
function sleep(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, time); }); } async function test () { for(let i = 0; i < 10; i++) { let result = await sleep(1000); console.log(result); } }
將 async/await 轉(zhuǎn)成 generator 和 promise 來實(shí)現(xiàn):
let test = function () { // ret 為一個Promise對象,因?yàn)镋S6語法規(guī)定 async 函數(shù)的返回值必須是一個 promise 對象 let ret = _asyncToGenerator(function* () { for (let i = 0; i < 10; i++) { let result = yield sleep(1000); console.log(result); } }); return ret; }(); // generator 自執(zhí)行器 function _asyncToGenerator(genFn) { return new Promise((resolve, reject) => { let gen = genFn(); function step(key, arg) { let info = {}; try { info = gen[key](arg); } catch (error) { reject(error); return; } if (info.done) { resolve(info.value); } else { return Promise.resolve(info.value).then((v) => { return step('next', v); }, (error) => { return step('throw', error); }); } } step('next'); }); }
看完以上代碼,是不是一目了然了啊。將 async/await 使用 generator 進(jìn)行改寫的關(guān)鍵是要使用 promise 來實(shí)現(xiàn)一個 generator 自執(zhí)行器。在babel中,大體的原理也是類似的。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。
相關(guān)文章
Javascript中實(shí)現(xiàn)trim()函數(shù)的兩種方法
這篇文章主要介紹了Javascript中實(shí)現(xiàn)trim()函數(shù)的兩種方法,本文直接給出實(shí)現(xiàn)代碼和使用方法,需要的朋友可以參考下2015-02-02js將列表組裝成樹結(jié)構(gòu)的兩種實(shí)現(xiàn)方式分享
最近做的任務(wù)提了新的需求,需要實(shí)現(xiàn)一個樹形結(jié)構(gòu),所以下面這篇文章主要給大家介紹了關(guān)于js將列表組裝成樹結(jié)構(gòu)的兩種實(shí)現(xiàn)方式,需要的朋友可以參考下2022-01-01火狐和ie下獲取javascript 獲取event的方法(推薦)
下面小編就為大家?guī)硪黄鸷蚷e下獲取javascript 獲取event的方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11JavaScript實(shí)現(xiàn)網(wǎng)頁加載進(jìn)度條代碼超簡單
網(wǎng)頁進(jìn)度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁的加載進(jìn)度情況,loading進(jìn)度條可用動畫的形式從開始0%到100%完成網(wǎng)頁加載這一過程。代碼簡單易懂,效果非常好,需要的一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09詳解原生JavaScript實(shí)現(xiàn)jQuery中AJAX處理的方法
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)jQuery中AJAX處理的方法,作者根據(jù)jQuery中一些對AJAX請求的處理方式來用原生API實(shí)現(xiàn),需要的朋友可以參考下2016-05-05利用element-ui實(shí)現(xiàn)遠(yuǎn)程搜索兩種實(shí)現(xiàn)方式
這篇文章主要介紹了利用element-ui的兩種遠(yuǎn)程搜索實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12在javaScript中檢測數(shù)據(jù)類型的幾種方式小結(jié)
在用javaScript編程的過程中,我們經(jīng)常會遇到這樣一個問題,就是需要檢測一個數(shù)據(jù)或變量的類型,本篇文章主要介紹了在javaScript中檢測數(shù)據(jù)類型的幾種方式小結(jié),有興趣的可以了解一下。2017-03-03JavaScript高級程序設(shè)計閱讀筆記(十六) javascript檢測瀏覽器和操作系統(tǒng)-detect.js
javascript檢測瀏覽器和操作系統(tǒng) detect.js使用介紹,需要的朋友可以參考下2012-08-08