作为前端开发者的伙伴们,肯定对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. MyBatis打印SQL执行时间

    1.plugins MyBatis官网对于plugins的描述是这样的: MyBatis allows you to intercept calls to at certain points with ...

  2. Android之淘宝商品列表长按遮罩效果

    先来看看淘宝.唯品会长按商品的效果,以及简单Demo的效果:        首先分析一下场景: 长按条目时,弹出遮罩的效果遮挡在原来的条目布局上: 页面滑动或点击其他的条目,上一个正在遮罩的条目遮罩消 ...

  3. yii2实战之初见端倪

    PHP框架大PK php框架有很多种,在国内应用较多的有:Thinkphp, Yii, Laravel, Codeigniter等.关于这些框架,孰优孰劣,是一个极具争议性的话题.各方支持者总能拿出自 ...

  4. Taurus.MVC 支持Asp.Net Core 的过程

    前言: 这些天,似乎.NET Core相关的新闻和文章经常在我眼前晃~~~ 昨天,微软又发布了.Core 2.1,又愰了一下,差点没亮瞎我的眼睛. 好吧,大概是上天给我的暗示,毕竟 CYQ.Data  ...

  5. mock测试之powermock

    由于公司框架依赖别的模块, 导致我们开发老是需要跟着他们的脚步, 所以我的上级领导提出这个方案说直接跳过他们,我们自己在本地测试,然后就找了它, 导入相关jar <dependency> ...

  6. RedisTemplate执行Redis脚本

    对于Redis脚本使用过的同学都知道,这个主要是为了防止竞态条件而用的.因为脚本是顺序执行的.(不用担心效率问题)比如我在工作用,用来设置考试最高分. 如果还没有用过的话,先去看Redis脚本的介绍, ...

  7. Vector简单介绍

    /*枚举就是Vector特有的取出方式发现枚举和迭代器很像其实枚举和迭代是一样的因为枚举的名称以及方法的名称都过长了.所以被迭代器取代了枚举郁郁而终了. */ import java.util.*;c ...

  8. Python中使用MongoEngine1

    pymongo来操作MongoDB数据库,但是直接把对于数据库的操作代码都写在脚本中,这会让应用的代码耦合性太强,而且不利于代码的优化管理 一般应用都是使用MVC框架来设计的,为了更好地维持MVC结构 ...

  9. JAVA经典算法40题(原题+分析)之原题

    JAVA经典算法40题(上) [程序1]   题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? [程 ...

  10. 用java8重写Arrays.sort(oldWay, new Comparator<String>(){@Override public int compare(String s1, String s2)});

    参考https://www.liaoxuefeng.com/article/001411306573093ce6ebcdd67624db98acedb2a905c8ea4000/ Java 8终于引进 ...