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