JS为什么说async/await是generator的语法糖详解

2019-11-19 11:11:52

字体：大中小

来源：转载

供稿：网友

关于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语法规定 async 函数的返回值必须是一个 promise 对象 let ret = _asyncToGenerator(function* () { for (let i = 0; i < 10; i++) {  let result = yield sleep(1000);  console.log(result); } }); return ret;}();// generator 自执行器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 自执行器。在babel中，大体的原理也是类似的。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对武林网的支持。

上一篇：elementUI 动态生成几行几列的方法示例

下一篇：Vue 使用计时器实现跑马灯效果的实例代码