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

在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
菜洗乾淨了
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
飯吃完了，好舒服啊
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代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS中Promise函数then的奥秘探究

    JS中Promise函数then的奥秘探究

    Promise概述 Promise对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口. 那么,什么是Promises? 首先,它是一个对象,也就是说与其他JavaScript对象的用法,没有什么两样:其次,它起到代理作用(proxy),充当异步操作与回调函数之间的中介.它使得异步操作具备同步操作的接口,使得程序具备正常的同步运行的流程,回调函数不必再一层层嵌套. 简单说,它的思想是,每一个异步任务立刻返回一个Promise对象,由于是立刻返回,所以可以采用同步操作的流程.这

  • 详解在微信小程序的JS脚本中使用Promise来优化函数处理

    在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入Promise确实能够很好的解决异步回调函数的可读性等问题,同时也使得我们调用的时候代码简洁一些,本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法. 1.小程序传统的回调处理 例如我们生成一个小程序,里面的app.js里面就自动带有一个getUserInfo的函数,这个是使用

  • NodeJS中利用Promise来封装异步函数

    在写Node.js的过程中,连续的IO操作可能会导致"金字塔噩梦",回调函数的多重嵌套让代码变的难以维护,利用CommonJs的Promise来封装异步函数,使用统一的链式API来摆脱多重回调的噩梦. Node.js提供的非阻塞IO模型允许我们利用回调函数的方式处理IO操作,但是当需要连续的IO操作时,你的回调函数会多重嵌套,代码很不美观,而且不易维护,而且可能会有许多错误处理的重复代码,也就是所谓的"Pyramid of Doom". 复制代码 代码如下: ste

  • node使用promise替代回调函数

    在学习 Node.js 过程中接触到了如何使用 async 来控制并发(使用 async 控制并发) async 的本质是一个流程控制.其实在异步编程中,还有一个更为经典的模型,叫做 Promise/Deferred 模型(当然还有更多相关解决方法,比如 eventproxy,co 等,到时候遇到在挖坑) 首先,我们思考一个典型的异步编程模型,考虑这样一个题目:读取一个文件,在控制台输出这个文件内容 var fs = require('fs'); fs.readFile('1.txt', 'ut

  • 利用Promise自定义一个GET请求的函数示例代码

    写在最前面 近期 review 自己以前的代码的时候,看到 promise 的使用方法,用的比较模糊.含义不清,用法凌乱,这里重新温习一下基础知识. 前言 JavaScript 是单线程工作,但是浏览器是多线程的.为了更好的完成我们程序的任务.Promise 异步的操作就由此诞生了. 一个 Promise 就是一个代表了异步操作最终完成或者失败的结果对象. 怎么使用? 语法 基本 new Promise( function(resolve, reject) {...} /* executor *

  • 详解如何构建Promise队列实现异步函数顺序执行

    场景 有a.b.c三个异步任务,要求必须先执行a,再执行b,最后执行c 且下一次任务必须要拿到上一次任务执行的结果,才能做操作 思路 我们需要实现一个队列,将这些异步函数添加进队列并且管理它们的执行,队列具有First In First Out的特性,也就是先添加进去的会被先执行,接着才会执行下一个(注意跟栈作区别) 大家也可以类比一下jQuery的animate方法,添加多个动画也会按顺序执行 解决 模拟3个异步函数 // 异步函数a var a = function () { return

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

    在es6中引入的原生Promise为js的异步回调问题带来了一个新的解决方式,而TJ大神写的co模块搭配Generator函数的同步写法,更是将js的异步回调带了更优雅的写法. 今天我想对比一下这两种方式,来看看这两种方式的区别以及优劣. 我们先抽象几个操作: 以做饭为例,我们先去买菜,回来洗菜,刷碗,烧菜,最后才是吃.定义如下方法: var buy = function (){}; //买菜,需要3s var clean = function(){}; //洗菜,需要1s var wash =

  • 实现动画效果核心方式的js代码

    下边我就简单说一下过程和原理.第一步:实现一个匿名函数并能自己执行. 复制代码 代码如下: (function(){ })() 这个函数在一样编的好的JS代码中经常会见到,起到闭包,自动执行的效果,在函数后加一对()表示自动执行,前边的匿名函数需要用()包起来,这样才能为宿主(我们的BOM环境)理解,里面的function(){}这就是个匿名函数.第二步:实现动画,以改变一个box的秀明度来说明.id为animation的div 复制代码 代码如下: <div id="animation&

  • 使用Promise链式调用解决多个异步回调的问题

    介绍 所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. 缺少场景支撑,对于新手而言,很难理解Promise的意义. 在<你不知道的JavaScript中>有个场景介绍得很形象: 我走到快餐店的柜台,点了一个芝士汉堡.我交给收银员1.47美元.通过下订单并付款,我已经发出了一个对某个值(就是那个汉堡)的请求.我已经启 动了一次交易. 但是,通常我不能马上就得到这个汉堡.收银员会交给我某个东西来代替汉堡:一张带有 订单号的收据.订单号就是一个

  • ON_COMMAND_RANGE多个按钮响应一个函数的解决方法

    本文描述了ON_COMMAND_RANGE多个按钮响应一个函数的解决方法. 开发人员需要注意在自定义消息响应函数的声明过程中,一定要注意参数的形式,稍微一疏忽就会导致莫须有的错误,具体以ON_COMMAND_RANGE为例说下. 1.声明消息响应函数:在要添加的工程上添加函数afx_msg void OnButtonPort(); 2.消息映射: BEGIN_MESSAGE_MAP(CXXXDlg, CDialog) //{{AFX_MSG_MAP(CXXXDlg) ON_WM_SYSCOMMA

  • 用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)

    问题 前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了,而后面的请求,对前面请求的返回结果,是有依赖的.如下面的代码所示: var someData; $.ajax({ url: '/prefix/entity1/action1', type: 'GET' , async: true, contentType: "application/json", success: function (resp) { //do something on response

  • Python如何在main中调用函数内的函数方式

    一般在Python中在函数中定义的函数是不能直接调用的,但是如果要用的话怎么办呢? 一般情况下: def a():#第一层函数 def b():#第二层函数 print('打开文件B') b()#第二层中的函数直接调用 结果显示: Traceback (most recent call last): File "C:/Users/rog/Desktop/wenzhang.py", line 4, in <module> b() NameError: name 'b' is

  • Java 数据结构哈希算法之哈希桶方式解决哈希冲突

    一. 实现形式一(键值对只能为整数) 我们可以先实现一个比较简单的哈希表,使用java中解决哈希冲突的方法,即哈希桶(开散列)方式实现,其中注意: 可以使用内部类方式定义节点 负载因子默认为0.75 因为我们使用的是哈希桶方式解决哈希冲突,所以在我们扩容成功之后,原来桶中的数据得重新哈希计算出新的位置,不然就和原来桶中的数据的位置不一样了 相关代码如下 public class HashBucket { static class Node {//使用内部类方式定义节点 public int ke

  • ES6新特性三： Generator(生成器)函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改变. ② 写法: function* f() {} ③ 作用:就是可以完全控制函数的内部状态的变化,依次遍历这些状态. ④ 运行过程:当调用Generator函数的时候,该函数并不执行,而是返回一个遍历器(可以理解成暂停执行).通过调用next()开始执行,遇到yield停止执行,返回一个value

  • 解决js函数闭包内存泄露问题的办法

    本文通过举例,由浅入深的讲解了解决js函数闭包内存泄露问题的办法,分享给大家供大家参考,具体内容如下 原始代码: function Cars(){ this.name = "Benz"; this.color = ["white","black"]; } Cars.prototype.sayColor = function(){ var outer = this; return function(){ return outer.color };

  • Android优雅的方式解决软键盘遮挡按钮问题

    Android优雅的方式解决软键盘遮挡按钮问题

    前言 比如在进行登录的操作中,用户输入完密码之后,肯定是想直接点击登录按钮的.返回键隐藏软键盘这样的体验肯定很糟糕,程序员,遇到问题解决问题. 实现1 xml <ScrollView android:id="@+id/scrollview" android:layout_width="match_parent" android:layout_height="wrap_content" android:fadingEdge="non

随机推荐