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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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设计模式中的工厂模式
2008/06/12 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php中filter_input函数用法分析
2014/11/15 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
python实现备份目录的方法
2015/08/03 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
Python如何重新加载模块
2020/07/29 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
华为慧通笔试题
2016/04/22 面试题
盛大笔试题
2016/11/05 面试题
国际商务专业学生个人的自我评价
2013/09/28 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
博士生专家推荐信
2014/09/26 职场文书
党员争先创优承诺书
2015/01/20 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
考勤制度通知
2015/04/25 职场文书
婚宴致辞
2015/07/28 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书