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