首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:33:53
字体:
来源:转载
供稿:网友

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

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

我们先抽象几个操作:

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

var buy = function (){}; //买菜,需要3svar clean = function(){};  //洗菜,需要1svar wash = function(){};  //刷碗,需要1svar cook = function(){};  //煮菜,需要3svar 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
菜洗乾淨了
4023
[ '飯菜煮好了,可以吃飯了', '盤子洗乾淨啦' ]
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
菜洗乾淨了
4026
[ '飯菜煮好了,可以吃飯了', '盤子洗乾淨啦' ]
7033
飯吃完了,好舒服啊

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选