JS為什么說async/await是generator的語法糖詳解
更新時(shí)間：2019年07月11日 08:57:27 作者：zhq2005095
這篇文章主要給大家介紹了關(guān)于JS為什么說async/await是generator的語法糖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
關(guān)于async的介紹，在阮一峰的ES6入門教程中說到：
async 函數(shù)是什么？一句話，它就是 Generator 函數(shù)的語法糖。
可是，為什么這么說呢？
首先，比如說有一個(gè)異步操作，使用 async/await 語法來以同步模擬異步操作。
使用 async/await 實(shí)現(xiàn)一個(gè) 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 為一個(gè)Promise對(duì)象，因?yàn)镋S6語法規(guī)定 async 函數(shù)的返回值必須是一個(gè) promise 對(duì)象
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)一個(gè) generator 自執(zhí)行器。在babel中，大體的原理也是類似的。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
javascript實(shí)現(xiàn)平滑無縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)平滑無縫滾動(dòng)的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
實(shí)現(xiàn)NodeJS與Mysql的交互首先把Mysql Module裝到NodeJS中，具體實(shí)現(xiàn)及結(jié)果截圖如下，有此需求的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
本文主要介紹了js中常用的Math方法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JavaScript實(shí)現(xiàn)電話號(hào)碼格式化的解法小結(jié)
在 JavaScript 編程中,經(jīng)常會(huì)遇到將給定數(shù)據(jù)轉(zhuǎn)換為特定格式的問題,本文為大家整理了一些常用方法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
淺析JavaScriptSerializer類的序列化與反序列化
本篇文章主要介紹了JavaScriptSerializer類 對(duì)象序列化與反序列化的方法、屬性以及實(shí)例代碼，有需要的朋友可以參考一下2016-11-11
JS實(shí)現(xiàn)勻速與減速緩慢運(yùn)動(dòng)的動(dòng)畫效果封裝示例
這篇文章主要介紹了JS實(shí)現(xiàn)勻速與減速緩慢運(yùn)動(dòng)的動(dòng)畫效果,結(jié)合實(shí)例形式分析了JavaScript封裝結(jié)合定時(shí)器的頁面元素動(dòng)態(tài)變換效果動(dòng)畫相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
給定兩個(gè)遞增排序的鏈表，如何將這兩個(gè)鏈表合并？合并后的鏈表依然按照遞增排序。本文就跟大家如何利用TypeScript實(shí)現(xiàn)這一效果，感興趣的可以學(xué)習(xí)一下2022-06-06
bootstrapTable+ajax加載數(shù)據(jù) refresh更新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了bootstrapTable+ajax加載數(shù)據(jù)，以及refresh更新數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了微信小程序圖片右邊加兩行文字的代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
開始之前，還是說說前文提到的關(guān)于把所有函數(shù)都寫在一個(gè)閉包內(nèi)的優(yōu)化問題。前文也提到了，因?yàn)槲覀冊诔跏蓟臅r(shí)候要調(diào)用的只是init，所以可以只把init寫入閉包，其他功能函數(shù)作為init的原型繼承方法來調(diào)用。2010-10-10