作为前端开发者的伙伴们,肯定对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. Centos7查看IP

    查看IP ip addr : lo: <LOOPBACK,UP,LOWER_UP> mtu qdisc noqueue state UNKNOWN qlen link/loopback : ...

  2. Spark核心编程---创建RDD

    创建RDD: 1:使用程序中的集合创建RDD,主要用于进行测试,可以在实际部署到集群运行之前,自己使用集合构造测试数据,来测试后面的spark应用流程. 2:使用本地文件创建RDD,主要用于临时性地处 ...

  3. 2017OKR年终回顾与2018OKR初步规划

    一.2017OKR - 年终回顾 自从6月份进行了年中总结,又是半年过去了,我的2017OKR又有了一些milestone.因此,按照国际惯例,又到了年终回顾的时候了,拉出来看看完成了多少.(以下目标 ...

  4. table中的一些另类标签

    thead/tbody/tfoot/caption/colgroup 注意:thead/tbody/tfoot三部分内容不受编辑顺序影响只和标签本身含义从头到脚显示不能把两个tbody的内容进行合并单 ...

  5. day13_Mysql事务与数据库连接池学习笔记

    一.Mysql事务 事务: 事务指逻辑上的一组操作,组成这组操作的各个单元,要么全部成功,要么全部不成功(数据回滚).  例如:A给B转帐,对应于如下两条sql语句 : update account ...

  6. mondrian 4.7 源码部署

    mondrian是一个开源的数据分析工程, 网上有关mondrian3.X的源码部署比较多, 有关4.X的部署较少. 目前官方推荐使用的时mondrian3.7的修订版, 可以再github上下载到最 ...

  7. JavaScript-//FOR/IN循环。当使用for/in循环遍历关联数组时,就可以清晰地体会到for/in的强大之处。

    <script> //FOR/IN循环.当使用for/in循环遍历关联数组时,就可以清晰地体会到for/in的强大之处. function getvalue(portfolio){ var ...

  8. 关于JQuery的技巧、易错点(连载中.....)

    JQuery的诞生让我们对原生态的js代码变得陌生起来,不得不说,他真的是很强大,接下来博主就浅谈一下我对JQuery的一些认知和小tips. JQuery:他是一个JavaScript库,他将原生态 ...

  9. 带BOM头文件解析

    在java中apache提供了一个工具类BOMStream,在获取文件流时,将获取到的文件流转化成为BOM流: InputStreamReader is = new InputStreamReader ...

  10. python3.5中,import sqlite3 出现 no module named _sqlite3的解决方法

    我用的centos7.2,系统自带python2.7. 我自己装了python3.5,但在导入sqlite3这个包的时候出现找不到包的错误. 下面给出解决方法. 第一种: 检查自己有没有安装sqlit ...