作为前端开发者的伙伴们,肯定对Promise,Generator,async/await非常熟悉不过了。Promise绝对是烂记于心,而async/await却让使大伙们感觉到爽(原来异步可以这么简单)。可回头来梳理他们的关联时,你惊讶的发现,他们是如此的密切相关。

一、三者关系与发展史

我对他们三者之间的关联理解如上图所示,Promise是基础,Generator和async/await串连多个Promise的同步执行,也就是把Promise的异步特性变为同步,编程更爽。当然Generator的yield也可以跟非Promise类型的对象,对于Generator更可以理解为迭代器。而async/await则是多个Promise同步执行的简单方法。

但我们不难发现在处理Promise的时候generator和asnyc/await的返回结果也会一个Promise,你可以按照一个标准的Promise进行处理。

发展史:

本人最先接触Promise是Jquery的Deferred对象,然后就出现了bluebird这类实现Promise A+规范的库,在后来就是ES6对他的原生实现,以及对Generator的加入,再后来async/await又出现了。

二、实例代码对比

从看到上述代码,对多个异步请求的处理方案从promise->generator->async/await的变迁,代码量越来越少,理解起来也更为简单。当然输出结果如下:

1. Four:延迟一秒输出

2. FiveSix:延迟两秒输出,说明await真实同步执行的

三、其他

1. 本文章只是本人对Promise,generator,async/await的简单理解,希望对部分小伙伴所有帮助。

2. 当然async/await不是javascript的特色,在其他语言中也是有实现的,如:java, c#。有兴趣的朋友可以查看《async和await之异步编程学习》文章,对c#与javascript的对比。

Promise, Generator, async/await的渐进理解的更多相关文章

  1. Promise 和async/await 的使用理解

    Promise 和async/await 的使用理解 1. new Promise时就会开始执行语句. new Promise(resolve => resolove('成功信息') )     ...

  2. callback vs async.js vs promise vs async / await

    需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = functio ...

  3. 一个例子读懂 JS 异步编程: Callback / Promise / Generator / Async

    JS异步编程实践理解 回顾JS异步编程方法的发展,主要有以下几种方式: Callback Promise Generator Async 需求 显示购物车商品列表的页面,用户可以勾选想要删除商品(单选 ...

  4. Promise和async await详解

    本文转载自Promise和async await详解 Promise 状态 pending: 初始状态, 非 fulfilled 或 rejected. fulfilled: 成功的操作. rejec ...

  5. node.js异步控制流程 回调,事件,promise和async/await

    写这个问题是因为最近看到一些初学者用回调用的不亦乐乎,最后代码左调来又调去很不直观. 首先上结论:推荐使用async/await或者co/yield,其次是promise,再次是事件,回调不要使用. ...

  6. Promise及Async/Await

      一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...

  7. 异步Promise及Async/Await最完整入门攻略

    一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪圈, ...

  8. “setTimeout、Promise、Async/Await 的区别”题目解析和扩展

    解答这个题目之前,先回顾下JavaScript的事件循环(Event Loop). JavaScript的事件循环 事件循环(Event Loop):同步和异步任务分别进入不同的执行"场所& ...

  9. promise 进阶 —— async / await 结合 bluebird

    一.背景 1.Node.js 异步控制 在之前写的 callback vs async.js vs promise vs async / await 里,我介绍了 ES6 的 promise 和 ES ...

随机推荐

  1. SSRS 数据源访问Cube 无法创建订阅的解决方法

    SSRS Report 的数据源可以直接放问SSAS 的Cube. 当报表的数据源设置成下图: 这样设置后,report 能够正常访问 Cube 并打开Report. 但是,如果我们需要添加数据驱动的 ...

  2. SOFA 源码分析 — 链路数据透传

    前言 SOFA-RPC 支持数据链路透传功能,官方解释: 链路数据透传功能支持应用向调用上下文中存放数据,达到整个链路上的应用都可以操作该数据. 使用方式如下,可分别向链路的 request 和 re ...

  3. 二叉树,AVL树和红黑树

    为了接下来能更好的学习TreeMap和TreeSet,讲解一下二叉树,AVL树和红黑树. 1. 二叉查找树 2. AVL树 2.1. 树旋转 2.1.1. 左旋和右旋 2.1.2. 左左,右右,左右, ...

  4. jieba库分词词频统计

    代码已发至github上的python文件 词频统计结果如下(词频为1的词组数量已省略): {'是': 5, '风格': 4, '擅长': 4, '的': 4, '兴趣': 4, '宣言': 4, ' ...

  5. cnblog 模板 SimpleMemory 个性化设置代码备份

    /页面顶部作者名/ blogTitle h1 { font-size: 50px; margin-top: 0px; } /页面简介/ blogTitle h2 { letter-spacing: 1 ...

  6. TensorFlow-谷歌深度学习库 图片处理模块

    Module: tf.image 这篇文章主要介绍TensorFlow处理图片这一块,这个模块和之前说过的文件I/O处理一样也是主要从python导过来的. 通过官方文档,我们了解到这个模块主要有一下 ...

  7. Python中’__main__’模块的作用

    Python不同于C/C++,程序执行并不需要主程序,如main(),而是文件自上而下的执行.但很多Python程序中都有 if __name__ == '__main__': statements ...

  8. PAT1009:Product of Polynomials

    1009. Product of Polynomials (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yu ...

  9. js中给easyUI年份,月份选择下拉框赋值

    sp中定义 js中初始化 //年度下拉框初始化 $("#yearChoose").combobox({    valueField:'year',     textField:'y ...

  10. 修复lvm的逻辑卷

    一.背景 公司传统的服务器不知道什么朝代的朝臣用lvm分区,1T的硬盘分了50G挂载到根目录"/"里面有/var./usr--,剩下的挂载到了"/home"目录 ...