Promise、co模块与async/await异步流程处理对比

异步处理方案概述

ES6引入了原生Promise，为JavaScript的异步回调问题提供了新的解决方案。与此同时，TJ大神开发的co模块配合Generator函数，实现了类似同步的代码写法，使异步处理更加优雅。

本文将对比这两种方式，分析它们的区别及各自的优势与劣势。

首先抽象几个操作步骤：

以做饭为例，流程包括：先去买菜，回来洗菜，刷碗，烧菜，最后吃饭。定义相关方法如下：

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

在实际场景中，我们可能先去买菜，然后洗菜，接着开始烧菜。在烧菜的同时进行刷碗，等碗刷完且菜煮好后，才开始吃饭。即煮菜和刷碗是并行执行的。

Promise方式实现

使用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()方法，模拟两个操作同时进行。从时间角度看，先去买菜耗时3秒，洗菜耗时1秒，输出4023；刷碗和煮菜同时进行，以耗时较长的煮菜（3秒）为准，输出7031；最后吃饭耗时2秒，输出9034。

Promise的优势在于可以灵活定制Promise链，从而掌控流程。需要同步时使用Promise链，需要异步时使用Promise.all()，接口简单，逻辑清晰。

co模块结合Generator函数

使用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：

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代码。

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