promise和co搭配生成器函数方式解决js代码异步流程的比较


Posted in Javascript onMay 25, 2018

在es6中引入的原生Promise为js的异步回调问题带来了一个新的解决方式,而TJ大神写的co模块搭配Generator函数的同步写法,更是将js的异步回调带了更优雅的写法。

今天我想对比一下这两种方式,来看看这两种方式的区别以及优劣。

我们先抽象几个操作:

以做饭为例,我们先去买菜,回来洗菜,刷碗,烧菜,最后才是吃。定义如下方法:

var buy = function (){}; //买菜,需要3s
var clean = function(){};  //洗菜,需要1s
var wash = function(){};  //刷碗,需要1s
var cook = function(){};  //煮菜,需要3s
var eat = function () {};  //吃饭,2s,最后的一个步骤。

在实际中,我们可能这样,先去买菜,然后洗菜,然后开始烧菜,烧菜的同时,刷碗,等碗刷完了,菜煮好了,我们才开始吃饭。也就是,煮菜和刷碗是并行的。

Promise方式

var begin = new Date();
buySomething().then((buyed)=>{
  console.log(buyed);
  console.log(new Date()-begin);
  return clean();
}).then((cleaned)=>{
  console.log(cleaned);
  console.log(new Date()-begin);
  return Promise.all([cook(),wash()]);
}).then((value)=>{
  console.log(value);
  console.log(new Date()-begin);
  return eat();
}).then((eated)=>{
  console.log(eated);
  console.log(new Date()-begin);
}).catch((err)=>{
  console.log(err);
});

输出结果:

菜买到啦
3021
菜洗乾?Q了
4023
[ '?菜煮好了,可以吃?了', '?子洗乾?Q啦' ]
7031
?吃完了,好舒服啊
9034

Promise里有个all()方法,可以传递一个promise数组,功能是当所有promise都成功时,才返回成功。上面的例子,我们就将 cook()和wash()放到all()方法,模拟两个操作同时进行。从时间上来看,先去买菜,耗时3s,洗菜耗时1s,输出4023,刷碗和煮菜同时进行,以耗时长的煮菜3s,输出7031,最后吃饭2s,输出9034。

Promise的优势就是,可以随意定制Promise链,去掌控你的流程,想要同步的时候,就使用Promise链,想要异步,就使用Promise.all(),接口也很简单,逻辑也很简单。

co+Generator搭配使用

let begin = new Date();
co(function* (){
  let buyed = yield buySomething();
  console.log(buyed);
  console.log(new Date() - begin);
  let cleaned = yield clean();
  console.log(cleaned);
  console.log(new Date() - begin);
  let cook_and_wash = yield [cook(),wash()];
  console.log(cook_and_wash);
  console.log(new Date() - begin);
  let eated = yield eat();
  console.log(eated);
  console.log(new Date() - begin);
});

输出:

菜买到啦
3023
菜洗乾?Q了
4026
[ '?菜煮好了,可以吃?了', '?子洗乾?Q啦' ]
7033
?吃完了,好舒服啊
9035

从代码上,我们可以看出,使用co+Generator函数的写法,更趋向于同步代码的写法,具体代码是怎么执行的,大家可以研究一下es6的Generator函数。而且yield也可以接收一个数组,用来异步执行两个方法。代码上更精炼,更符合逻辑。
当前来说,co模块+Generator函数是一个比较好的改善“回调地狱”的优美的解决方案。

而且,这种方式比Promise优的一点是,Promise在实际操作中可能需要嵌套,例如我上一篇博客中<>中的例子一样,如果使用co+generator方式,则可以减少嵌套,在代码逻辑上更清晰,也不会让人思维混乱。

如可以改写为如下:

var getColl = (collname, db) => {
 return new Promise(function(resolve,reject){
  co(function* (){
   var coll = yield db.createCollection(collname,{capped: true,size: 11800000,max: 5000});
   var stats = yield coll.stats();
   if(stats.count == 0){
    var inserted = yield coll.insert({coll: collname,create_time: new Date()});
   }
   resolve(coll);
  }).catch(function(err){
   reject(err);
  });
 });
};

这段代码在逻辑上,看起来就比之前用纯Promise实现的清爽些,逻辑上不混乱。

es7的async和await

es7提供了async函数和await,这里和co+Generator函数方式是一样的,都是基于Promise实现的。这里async函数可以看作是Generator函数的语法糖,await可以看作是yield的语法糖。

co模块可以看作是Generator函数的执行器,而es7中,async函数自带执行器,这样就不必引用第三方的co模块了。

更好的语义,async和await,比起星号和yield,语义更清楚了。async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。

更广的适用性。 co模块约定,yield命令后面只能是Thunk函数或Promise对象,而async函数的await命令后面,可以是Promise对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)。
返回值是Promise。async函数的返回值是Promise对象,这比Generator函数的返回值是Iterator对象方便多了。你可以用then方法指定下一步的操作。

可以说,es7的async和await才是解决回调地狱的终极大招,虽然现在还不能以原生代码编写,但是可以使用es7编写代码,然后使用babel转译成es5代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 中介者模式实例
Dec 16 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 #Javascript
Webpack中雪碧图插件使用详解
May 25 #Javascript
使用javascript做在线算法编程
May 25 #Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 #Javascript
浅析node.js的模块加载机制
May 25 #Javascript
webpack4的迁移的使用方法
May 25 #Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 #Javascript
You might like
分享PHP入门的学习方法
2007/01/02 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php不写闭合标签的好处
2014/03/04 PHP
PHP的几个常用加密函数
2016/02/03 PHP
菜鸟javascript基础整理1
2010/12/06 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
js实现分页功能
2017/05/24 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
python版简单工厂模式
2017/10/16 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
python三方库之requests的快速上手
2019/03/04 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
金融专业个人求职信范文
2013/11/28 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
安全生产活动月方案
2014/03/09 职场文书
导师工作推荐信范文
2014/05/17 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
个人催款函范文
2015/06/24 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
工作一年自我鉴定
2019/06/20 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书