[转]JavaScript/Node.JS 中的 Promises

JavaScript Promises 初体验

Promise 是什么？

Promise 对象用来进行延迟(deferred) 和 异步(asynchronous) 计算。

一个 Promise 处于以下三种状态之一:

• pending: 初始状态, 非 fulfilled 或 rejected.
• fulfilled: 成功的操作.
• rejected: 失败的操作.

Promise 接口表示为一个值的代理，这个值在promise创建时未必已知. 它允许你将 handlers 与一个异步 action 最终的成功或失败状态关联起来. 这使得异步方法可以像同步方法那样返回值: 异步方法返回一个在未来某个时刻拥有一个值的 promise 来替代最终返回值.

pending状态的promise既可带着一个值成为 fulfilled 状态，也可带着一个reason成为 rejected 状态. 任意情况发生时, 通过promise的 then 方法所排列(queued up)的相应handlers 就会被调用. (当绑定相应的 handler 时，如果 promise 已经处于 fulfilled 或 rejected 状态这个 handler 将会被调用, 所以在异步操作的完成和它的 handler 的绑定之间不存在竞争条件.)

因为 Promise.prototype.then 和 Promise.prototype.catch 方法返回 promises, 所以它们可以被链式调用—一种被称为 composition 的操作.

Promise 为何出现？

简单的说，Promise 被当成 callback hell 的救命仙丹。

回调函数是JavaScript的一大特色！ node.js官方的api基本都是以会回调方式传递函数返回值。习惯同步编程的对这种异步方式多少会产生水土不服，而且层层嵌套，不知不觉就建造起了一座高高的回调金字塔。针对这种普遍问题，Promise应势而生！

Promise 基本用法

创建 Promise

promise.then(function(result) {
  console.log(result); // “完美！”
}, function(err) {
  console.log(err); // Error: "出问题了"
});

“then”接受两个参数，成功的时候调用一个，失败的时候调用另一个，两个都是可选的，所以你可以只处理成功的情况或者失败的情况。

Promise 实践

1. 值的处理

你可以对结果做些修改然后返回一个新值：

getJSON('story.json').then(function(story) {
  return getJSON(story.chapterUrls[0]);
}).then(function(chapter1) {
  console.log("Got chapter 1!", chapter1);
});

你返回一个“类 Promise”的对象

get('story.json').then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.log("Failed!", error);
});

你还可以使用“catch”：

asyncThing1().then(function() {
  return asyncThing2();
}).then(function() {
  return asyncThing3();
}).catch(function(err) {
  return asyncRecovery1();
}).then(function() {
  return asyncThing4();
}, function(err) {
  return asyncRecovery2();
}).catch(function(err) {
  console.log("Don't worry about it");
}).then(function() {
  console.log("All done!");
});

Promise API 参考

静态方法

Promise.resolve(promise);
返回一个 Promise（当且仅当 promise.constructor == Promise）

Promise.resolve(thenable);
从 thenable 对象创建一个新的 Promise。一个 thenable（类 Promise）对象是一个带有“then”方法的对象。

Promise.resolve(obj);
创建一个以 obj 为肯定结果的 Promise。

Promise.reject(obj);
创建一个以 obj 为否定结果的 Promise。为了一致性和调试便利（如堆栈追踪），obj 应该是一个 Error 实例对象。

Promise.all(array);
创建一个 Promise，当且仅当传入数组中的所有 Promise 都肯定之后才肯定，如果遇到数组中的任何一个 Promise 以否定结束，则抛出否定结果。每个数组元素都会首先经过 Promise.resolve，所以数组可以包含类 Promise 对象或者其他对象。肯定结果是一个数组，包含传入数组中每个 Promise 的肯定结果（且保持顺序）；否定结果是传入数组中第一个遇到的否定结果。

Promise.race(array);
创建一个 Promise，当数组中的任意对象肯定时将其结果作为肯定结束，或者当数组中任意对象否定时将其结果作为否定结束。

Promise 的现行解决方案

其实已经有一些第三方库实现了 Promise 的功能：

• Q
• when
• WinJS
• RSVP.js

上面这些库和 JavaScript 原生 Promise 都遵守一个通用的、标准化的规范：Promises/A+，jQuery 有个类似的方法叫 Deferred，但不兼容 Promises/A+ 规范，于是会有点小问题，使用需谨慎。jQuery 还有一个 Promise 类型，它其实是 Deferred 的缩减版，所以也有同样问题。

目前的浏览器已经（部分）实现了 Promise。

Chrome 32、Opera 19 和 Firefox 29 以上的版本已经默认支持 Promise。由于是在 WebKit 内核中所以我们有理由期待下个版本的 Safari 也会支持，并且 IE 也在不断的开发中。

要在这两个浏览器上达到兼容标准 Promise，或者在其他浏览器以及 Node.js 中使用 Promise，可以看看这个polyfill（gzip 之后 2K）。

相关参考

• http://www.html5rocks.com/zh/tutorials/es6/promises/
• http://www.w3ctech.com/topic/721
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
• http://www.codemud.net/~thinker/GinGinCGI.py/showid_doc/488

来源：http://www.phpabc.cn/javascript-promises-mini-howto.html

nodejs与Promise的思想碰撞

玩node的同志们都知道，当这门语言被提出来的时候，作为自己最为骄傲的异步机制，却被PHP和Python等战团喷得不成样子的是，他们嘲笑着nodejs那蠢蠢的无限嵌套，nodejs战团只能以我们只要性能！！！来安慰自己。

众所周知，javascript作为一个单线程语言，所有工作都是阻塞的，有好多人不理解为什么说是javascript是阻塞的，怎么可以做到异步机制呢？

举一个栗子

在我们平时可以接触到的情况下，我们可以用浏览器来触发XMLHttpRequest（Ajax）来异步获取数据，setTimeout、setInterval来完成定时任务，而这并不是javascript的语言来决定这些异步操作的，而是解释Javascript的浏览器来去操作线程作多线程操作的，可以把这些方法理解为浏览器抛出的多线程API。而nodejs是基于高性能v8来实现，它也是像浏览器一样，抛出了很多操作线程的API，从而来实现异步机制。

异步的机制可以让我们更为节省系统资源，并不需要为每一个请求去像PHP，Tomcat一样新开一个线程，node内部会有处理各种任务的线程（使用Net，File System，Timers 等很多模块来操作不同的线程），把不同的异步任务分发给各个任务线程，并会弹性地为线程分配硬件，这都是来自v8的高性能，也是为什么nodejs能面对高I/O情况的根本原因。

现实

---

到头来我们必须面对血淋淋的现实，当我初接触node的时候，代码也是这样写的

fs.readFile(MrFileFirst,"utf8",function(err,data1){
    if(err){
        //do err thing
    }else{
        fs.readFile(MrFileSecond,"utf8",function(err,data2){
            if(err){
                //do err thing
            }else{
                mongo.find(SomeQuery,function(err,data3){
                    if(err){
                        //do err thing
                    }else{
                        //do the real thing with [data1,data2,data3]
                    }
                })
            }
        })
    }
})

Oh,my god!好好的异步机制还是玩成了同步……而且惨不忍睹！仅仅只是想返回最后的三个数据，但是这个例子三个任务之间并没有关系嵌套，这样子强行把异步玩成同步的话，还是阻塞的代码，这段代码的工作时序大概在这样的：

和不用node并没有什么区别，完全是阻塞的。在平时我们可以碰到更多的关系层级的嵌套（下一步的操作要基于上一步的结果），这时才必须使用同步去完成任务，但是要是像上面这样写的话，我相信你会写到吐血的（我已经忘了我在代码中写过多个少if (err) {}了，因为node的底层API异步方法都是以err为第一个参数，使得上层所有异步方法都为这种模式）

进化

---

有人看不下去了，便自会有人站出来，我们渐渐地实现了从无到有的过程，我最开始接触的是阿里的

eventproxy：

var ep = require("eventproxy");

ep.create("task1","task2","task3",function(result1,result2,result3){
    //do the real thing with [result1,result2,result3]
}).fail(function(e){
    //do err thing
});

fs.readFile(MrFileFirst,"utf8",ep.done("task1"));
fs.readFile(MrFileSecond,"utf8",ep.done("task2"));
fs.readFile(MrFileThird,"utf8",ep.done("task3"));

这样，就可以实现三个文件异步进行读取，并且在三个任务都完成时进行最终的工作，时序图如下图：

三个任务几乎同时触发（除去代码的触发时间），所以左边的三个点其实可以看作是一个点，而这三个任务都去同时异步进行，在三个任务都完成的时候，来触发最后的任务。

这才是node发挥出自己优点的地方，处理时间节省了很多（如果三个任务的时间消耗都为1，则时间缩减了2/3），这才是大node.js。

eventproxy也有更多的用法，可以去其npm上看看。

async

async是国外强大的异步模块，它的功能与eventproxy相似，但是维护速度与周期特别快，毕竟是用的人多呀，但是支持国产——是一种情怀，附介绍使用async的文章
http://blog.fens.me/nodejs-async/

再进化

---

人总是不知足的，而刚好是这个不知足，才让我们不停地去探索想要的、更为方便的东西。而这时，便有人想让自己写的代码复用性更高，同时也不想去写那么多的callback去嵌套，这时便有了Promiss/A+规范，其是：

An open standard for sound, interoperable JavaScript promises—by implementers, for implementers.
一个健全的通用JavaScript Promise开放标准，源于开发者，并归于开发者

在ES6中也新增了原生Promise的使用，而之前Promise库有promise，Q，bluebird等，在这些库中现在已经慢慢对ES6的原生Promise作了兼容，虽然ES6现在还没有大规模投入使用过程中。

在其中最为出名的则是bluebird和Q库，我使用的是bluebird，先贴一段bluebird的使用代码感受感受

bluebird：

//CAST
//MrFileOne.txt
//MrFileTow.txt
//MrFileThree.txt


//关系嵌套任务
var Promise = require("bluebird"),
    readFileAsync = Promise.promisify(require("fs").readFile);

readFileAsync("MrFileOne.txt","utf8")
    .then(function(data){
        //if the data contains the path of MrFileTow
        var path = ..... //do something with data
        return readFileAsync(path,"utf8");
    })
    .then(function(data){
        //if the data contains the path of MrFileThree
        var path = ..... //do something with data
        return readFileAsync(path,"utf8");
    })
    .then(function(data){
        //get the data of MrFileThree
        //do something
    })
    .catch(function(err){
        console.log(err);
    });


//无关系汇总任务
Promise.all([
        readFileAsync("MrFileOne.txt","utf8"),
        readFileAsync("MrFileTwo.txt","utf8"),
        readFileAsync("MrFileThree.txt","utf8")
    ])
    .then(function(datas){
        //do something with three data form our actors
    })
    .catch(function(err){
        console.log(err);
    });

有没有一下被这种写法所吸引，这就是Promise模块的魅力，它很优雅地将函数的回调写在了then里面，并为then返回一个新的Promise，以供下一次的then去回调本次返回的结果。

How

首先使用了方法：

readFileAsync = Promise.promisify(rquire("fs").readFile);

这个方法则是为复制了readFile方法并为其增添了Promise机制，而Promise机制是什么呢？那就是为其添加Promise方法和属性后，让整个方法的返回值为一个Promise对象，我们可以通过Promise来调用then方法，来去对这个Promise方法的回调进行处理。在Promise中都默认的将第一个参数err放在了后面的catch中，使得我们再也不用写那么多的if(err)了。我们可以直接通过在then方法中通过函数参数来获取这个Promise的异步数据，从而进行下一步的处理。

而在then方法后，其返回的也是一个Promise对象，我们可以在其后再次进行then来获取上一个then的数据并进行处理。当然，我们也可以人为地去决定这个then的返回参数，但是整个then方法返回的都是一个Promise对象。

readFileAsync("MrFileOne.txt","utf8")
    .then(function(data){
        if(.....){  //data isn't what we want
            Promise.reject("It's not correct data!");
        }else{
            return data;
        }
    })
    .then(function(){
        console.log("yeah! we got data!");
    })
    .catch(function(err){
        console.log(err);
    })

在上面代码中，如果获取到的data并不是我们想要的，则我们可直接调用Promise.reject抛出一个ERROR，并直接交给catch来处理错误，所以在控制台我们能得到的是“It's not correct data!”，并不会得到“yeah! we got data!”，因为抛出错误后其之后的then方法并不会跟着执行。

More

当然我们也可以自定义多个catch来捕获不同的ERROR，对其作不同的处理，就像下面的一样

var customError = new Error(SOMENUMBER,SOMEDESCRIPTION)

readFileAsync("MrFileOne.txt","utf8")
    .then(function(data){
        switch(data){
            case CASE1：
                Promise.reject(customError);
            case CASE2:
                Promise.reject(new SyntaxError("noooooo!"));
        }
    })
    .catch(customError,function(err){
        //do with customError
    })
    .catch(SyntaxError,function(err){
        //do with SyntaxError
    })
    .catch(function(err){
        console.log(err);
    })

而更多的使用方法，可以在bluebird on npm里学习得到，相信你看了之后会爱上Promise的。

Q

Q模块也是一个非常优秀的Promise，它的实现原理和bluebird都大同小异，都是基于Promise/A+标准来扩展的，所以使用上甚至都是差不了多少的，选择哪一个就看个人爱好了。

Promise编程思想

---

重点来啦，我们先来看一段普通的代码

var obj = (function(){
    var variable;
    
    return {
        get: function(){
            return variable;
        },
        set: function(v){
            variable = v;
        }
    }
})();

exports.get = obj.get;
exports.set = obj.set;

这个代码实现的是创建了一个闭包来储存变量，那么我在外部调用这个模块时，则可以去操作这个值，即实现了一个Scope变量，并把它封装了起来。

矛盾

根据我们以前的思想，这段代码看起来很正常，但是这时侯我要加一判断进去，即在get方法调用时，如果varibale为undefined，那么我则去做一个读文件的操作，从文件中将它读出来，并反回，你会怎么实现呢？

你会发现，通过以往的思维，你是无法做到这一方法的，那么使用异步思维去想想呢，好像有点门头：

get: function(callback){
    if(varibale){
        callback(varibale);
    }else{
        fs.readFile("SomeFile","utf8",function(err,data){
            if(err){
                //do with err
                return;
            }
            
            callback(data);
        })
    }
}

这样……嗯咳咳，看起来似乎好像也许解决的还可以，但是你自己也会觉得，这其实糟透了，我们将原本的简单get函数更改得这么复杂。那么问题来了，谁会在使用的时候会想到这个get方法其实是一个回调的方法呢？你平时使用get时你会考虑说是这个里面有可以是回调吗？我们都是直接get()来获取它的返回值。

这就是我们自己给自己造成的矛盾和麻烦，这也是我以前曾经遇到的。

突破

那么在模块化的node里，我们怎么去实现这些不必要的麻烦呢？那就是用Promise思想去编写自己的代码，我们先试着用上面说到的bluebird来加工一下这段代码：

var Promise = require("bluebird"),
    fs = require("fs");

var obj = (function(){
    var variable;
    
    return {
        get: function(){
            if(variable){
                return Promise.resolve(variable);
            }
            
            return Promise.promisify(fs.readFile)("SomeFile","utf8");
        },
        set: function(v){
            return Promise.resolve(variable = v);
        }
    }
});

exports.get = obj.get;
exports.set = obj.set;

就是这么漂亮，使用Promise.resolve方法则是将变量转化为一个Promise对象，则是我们在外部对这个模块进行使用时，则要求我们使用Promise的思想去应用模块抛出的接口，比如：

var module = require("thisModule.js");

module.get()
    .then(function(data){
        console.log(data);
                module.set("new String");
                return module.get;
    })
    .then(function(data){
        console.log(data);
    });

当我们使用Promise思想去面对每一个接口的时候，我们可以完全不用考虑这个模块的代码是怎么写的，这个方法该怎么用才是对的，到底是回调还是赋值。我们可以很直接的在其模块方法后then来解决一切问题！不用关心前面的工作到底做了什么，怎么做的，到底是异步还是同步，只要我们将整个工作流程都使用Promise来做的话，那会轻松很多，而且代码的可读性会变得更好！

尼玛！简直是神器啊！

使用Promise编程思想去和node玩耍，你会相信真爱就在眼前。同时我也相信在前端模块化加速的今天，Promise编程思想必定会渗透至前端的更多角落。

Finish.

来源：http://www.cnblogs.com/zhiyishou/p/4711735.html

利用promise写出更加优美的nodejs程序

什么是 promise

promise 一个标准，它描述了异步调用的返回结果，包括正确返回结果和错误处理。关于详细的说明文档可以参考 Promises/A+ 。目前实现 promise 标准的模块有很多，如 Q 、 bluebird 和 Deferred ，下面我们以 Q 为例，介绍一下 promise 在 nodejs 中的使用方法。

将一般的异步调用的函数转换为 promise 风格的函数

比如一般情况下，我们异步读取文件会写出下面的代码:

fs.readFile("test.txt",function(err,data){
    if(!err){
        console.log(data);
    }else{
        console.error(err);
    }
});

我们可以把 fs.readFile 函数封装为 promise 风格的函数，如下：

var preadFile = function(file){
	fs.readFile(file,function(err,data){
		var deferred = Q.defer();
		if(!err){
			deferred.resolve(data);
		}else{
			deferred.reject(err);
		}

		return deferred.promise;
	});
}

这样我们就可以这样调用这个方法了：

//then 的第一个参数是正确处理函数，第二个参数是错误处理函数
preadFile("test.txt").then(console.log,console.error);

可以看到这样调用更加直接明了。

使用方法

1. 各个回调函数顺序传递数据: 
   在 nodejs 中我们回去数据时，时常遇回调函数的返回结果需要传递给下一个回调函数，到时很大的回调函数嵌套， promise 
   可以很轻松的在回调函数之间传递参数，看下面的例子：

   var fun1 = function (data,cb) {
   	cb(null,data+" fun1");
   }
   
   var fun2 = function (data,cb) {
   	cb(null,data+" fun2");
   }
   
   var fun3 = function (data,cb) {
   	cb(null,data+" fun3");
   }
   
   function main(data,cb){
   	fun1(data,function(err,data){
   		if(!err){
   			fun2(data,function(err,data){
   				if(!err){
   					fun3(data,cb);
   				}else{
   					cb(err);
   				}
   			});
   		}else{
   			cb(err);
   		}
   	});
   }

   可以看到 main 函数为了得到数据，需要嵌套调用 fun1 , fun2 和 fun3 ，如果需要调用很多函数，那么会形成很大的回调函数嵌套调用，导致代码看起来很丑陋，而且不容易维护，下面我们改用 promise 重写这段代码：

   var Q = require("q");
   var fun1 = function (data) {
   	var deferred = Q.defer();
   	deferred.resolve(data+" fun1");
   	return deferred.promise;
   }
   
   var fun2 = function (data) {
   	var deferred = Q.defer();
   	deferred.resolve(data+" fun2");
   	return deferred.promise;
   }
   
   var fun3 = function (data) {
   	var deferred = Q.defer();
   	deferred.resolve(data+" fun3");
   	return deferred.promise;
   }
   
   function main(data,cb){
      fun2("test")
   	   .then(fun3)
   	   .then(fun4)
   	   .done(function(data){
   		   cb(null,data);//ok 获得的最终数据为 --->"test fun1 fun2 fun3"
   	   },function(err){
   		   cb(err);//failed
   	   });
   }

2. 收集各个回调函数产生的数据：有时候我们需要执行很多回调函数，然手把这个回调函数的数据一齐传递给一个函数处理，此时我们可以使用 all 和 spread 方法，参看如下代码：

   var Q = require("q");
   var fun1 = function (data) {
   	var deferred = Q.defer();
   	deferred.resolve(data+" fun1");
   	return deferred.promise;
   }
   
   var fun2 = function (data) {
   	var deferred = Q.defer();
   	deferred.resolve(data+" fun2");
   	return deferred.promise;
   }
   
   var fun3 = function (data) {
   	var deferred = Q.defer();
   	deferred.resolve(data+" fun3");
   	return deferred.promise;
   }
   
   Q.all([
   	fun2("test1"),fun3("test2"),fun4("test3")
   	]).spread(function(){
   		console.log(arguments);//获得的参数为('test1 fun1', 'test2 fun2', 'test3 fun3' )
   	});

3. 统一处理错误：传统的回调函数方式使用的话，我们需要在每一个回调函数里判断是否有错误需要处理，这样会存在很多冗余代码，使用 promise 的话，可以使用 done 或者 fail 统一在一个函数中处理错误，如第一个例子一样，使用 done 方法的第二个参数处理错误。

来源：http://www.tuicool.com/articles/QnIfqq

如何把 Callback 接口包装成 Promise 接口

前端开发尤其 Node.js 开发中，经常要调用一些异步接口，如：文件操作、网络数据读取。而这些接口默认情况下往往是通过 Callback 方式提供的，即：最后一个参数传入一个回调函数，当出现异常时，将错误信息作为第一个参数传给回调函数，如果正常，第一个参数为 null，后面的参数为对应其他的值。

var fs = require("fs");
fs.readFile("foo.json", "utf8", function(err, content){
    if(err){
        //异常情况
    }else{
        //正常情况
    }
})

当这种写法遇上比较复杂的逻辑时，就很容易出现 callback hell 的问题。为此，开发者也积极寻找对应的解决方案，如：Promise、ES6 Generator + co + Promise、ES2016 草案里的 async functions 等。

这几种方案也是慢慢的在进化，试图更好的处理 callback hell 的问题。但这几种方案一致的依赖基础方式都是 Promise，这也是为什么 Promise 并没有引入新的语法但也写进了 ES6 规范的一个大的原因。甚至现在一些新的接口（如：Fetch）直接返回 Promise。

然后对异步接口的处理方式都依赖 Promise，那么下面就来说下如何将 Callback 接口变成 Promise 接口。

Callback 接口变成 Promise 接口

其实 Callback 接口变成 Promise 接口非常简单，包括现在也有很多库都有类似的方法可以转换，如：

• bluebird 模块里有 promisify 方法
• es6-promisify 模块
• ThinkJS 里的 promisify 方法

由于 Callback 接口的参数方式是固定的，所以很容易变成 Promise 接口，如：

let promisify = (fn, receiver) => {
  return (...args) => {
    return new Promise((resolve, reject) => {
      fn.apply(receiver, [...args, (err, res) => {
        return err ? reject(err) : resolve(res);
      }]);
    });
  };
};

几行代码基本就搞定了对 Callback 接口对 Promise 的转换，当然上面的代码是用 ES6 代码写的。用 ES5 写的话可以类似下面这样：

var promisify = function promisify(fn, receiver) {
  return function () {
    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return new Promise(function (resolve, reject) {
      fn.apply(receiver, [].concat(args, [function (err, res) {
        return err ? reject(err) : resolve(res);
      }]));
    });
  };
};

有了 promisify 这样一个函数，那么把 Callback 接口变成 Promise 接口就非常简单了，如：

var fs = require("fs");
var readFilePromise = promisify(fs.readFile, fs); //包装为 Promise 接口
readFilePromise("foo.json", "utf8").then(function(content){
    //正常情况
}).catch(function(err){
    //异常情况
})

有了快速转换的方法后，就不用去找模块对应的 Promise 版本的模块了。

特殊情况

有些设计不合理的接口可能会传递多个值给回调函数，如：

var fn = function(foo, callback){
    if(success){
        callback(null, content1, content2);
    }else{
        callback(err);
    }
}

上面的代码在正常情况下会传递 2 个参数给回调函数，由于 Promise resolve 的时候只能传入一个值，所以这种接口变成 Promise 接口后是无法获取到 content2 数据的。

对于这种情况只能手工来包装了，同时顺便鄙视下设计这个接口的人。

担心性能

有些人担心大量使用 Promise 会引起性能的下降，这个事情在当初 Node.js 设计接口时也争吵了很久，有时候易用性和性能本来就是有些互斥的。

其实可以使用高性能的 Promise 库来提高性能，如：bluebird。简单对比测试发现，blurbird 的性能是 V8 里内置的 Promise 3 倍左右（bluebird 的优化方式见 https://github.com/petkaantonov/bluebird/wiki/Optimization-killers ）。

可以通过下面的方式替换调内置的 Promise：

global.Promise = require("bluebird");

如果项目里用了 Babel 编译 ES6 代码的话，可以用下面的方式替换：

//Babel 编译时会把 Promise 编译为 Babel 依赖的 Promise
require("babel-runtime/core-js/promise").default = require("bluebird");
global.Promise = require("bluebird");

本文链接：http://welefen.com/post/how-to-convert-callback-to-promise.html

Promise的前世今生和妙用技巧

浏览器事件模型和回调机制

JavaScript作为单线程运行于浏览器之中，这是每本JavaScript教科书中都会被提到的。同时出于对UI线程操作的安全性考虑，JavaScript和UI线程也处于同一个线程中。因此对于长时间的耗时操作，将会阻塞UI的响应。为了更好的UI体验，应该尽量的避免JavaScript中执行较长耗时的操作（如大量for循环的对象diff等）或者是长时间I/O阻塞的任务。所以在浏览器中的大多数任务都是异步（无阻塞）执行的，例如：鼠标点击事件、窗口大小拖拉事件、定时器触发事件、Ajax完成回调事件等。当每一个异步事件完成时，它都将被放入一个叫做”浏览器事件队列“中的事件池中去。而这些被放在事件池中的任务，将会被javascript引擎单线程处理的一个一个的处理，当在此次处理中再次遇见的异步任务，它们也会被放到事件池中去，等待下一次的tick被处理。另外在HTML5中引入了新的组件-Web Worker，它可以在JavaScript线程以外执行这些任务，而不阻塞当前UI线程。

浏览器中的事件循环模型如下图所示：

由于浏览器的这种内部事件循环机制，所以JavaScript一直以callback回调的方式来处理事件任务。因此无所避免的对于多个的JavaScript异步任务的处理，将会遇见”callback hell“（回调地狱），使得这类代码及其不可读和难易维护。

asyncTask1(data, function (data1){

    asyncTask2(data1, function (data2){

        asyncTask3(data2, function (data3){
                // .... 魔鬼式的金字塔还在继续
        });

    });

});

Promise的横空出世

因此很多JavaScript牛人开始寻找解决这回调地狱的模式设计，随后Promise（jQuery的deferred也属于Promise范畴）便被引入到了JavaScript的世界。Promise在英语中语义为：”承诺“，它表示如A调用一个长时间任务B的时候，B将返回一个”承诺“给A，A不用关心整个实施的过程，继续做自己的任务；当B实施完成的时候，会通过A，并将执行A之间的预先约定的回调。而deferred在英语中语义为：”延迟“，这也说明promise解决的问题是一种带有延迟的事件，这个事件会被延迟到未来某个合适点再执行。

Promise/A+规范：

• Promise 对象有三种状态： Pending – Promise对象的初始状态，等到任务的完成或者被拒绝；Fulfilled – 任务执行完成并且成功的状态；Rejected – 任务执行完成并且失败的状态；
• Promise的状态只可能从“Pending”状态转到“Fulfilled”状态或者“Rejected”状态，而且不能逆向转换，同时“Fulfilled”状态和“Rejected”状态也不能相互转换；
• Promise对象必须实现then方法，then是promise规范的核心，而且then方法也必须返回一个Promise对象，同一个Promise对象可以注册多个then方法，并且回调的执行顺序跟它们的注册顺序一致；
• then方法接受两个回调函数，它们分别为：成功时的回调和失败时的回调；并且它们分别在：Promise由“Pending”状态转换到“Fulfilled”状态时被调用和在Promise由“Pending”状态转换到“Rejected”状态时被调用。

如下面所示：

根据Promise/A+规范，我们在文章开始的Promise伪代码就可以转换为如下代码：

asyncTask1(data)
    .then(function(data1){
        return asyncTask2(data1);
    })
    .then(function(data2){
       return asyncTask3(data2);
    })
    // 仍然可以继续then方法

Promise将原来回调地狱中的回调函数，从横向式增加巧妙的变为了纵向增长。以链式的风格，纵向的书写，使得代码更加的可读和易于维护。

Promise在JavaScript的世界中逐渐的被大家所接受，所以在ES6的标准版中已经引入了Promise的规范了。现在通过Babel，可以完全放心的引入产品环境之中了。

另外，对于解决这类异步任务的方式，在ES7中将会引入async、await两个关键字，以同步的方式来书写异步的任务，它被誉为”JavaScript异步处理的终极方案“。这两个关键字是ES6标准中生成器（generator）和Promise的组合新语法，内置generator的执行器的一种方式。当然async、await的讲解并不会在本文中展开，有兴趣的读者可以参见MDN资料。

Promise的妙用

如上所说Promise在处理异步回调或者是延迟执行任务时候，是一个不错的选择方案。下面我们将介绍一些Promise的使用技巧（下面将利用Angular的$q和$http为例，当然对于jQuery的deferred，ES6的Promise仍然实用）：

多个异步任务的串行处理

在上文中提到的回调地狱案例，就是一种试图去将多个异步的任务串行处理的结果，使得代码不断的横向延伸，可读性和维护性急剧下降。当然我们也提到了Promise利用链式和延迟执行模型，将代码从横向延伸拉回了纵向增长。使用Angular中$http的实现如下：

$http.get('/demo1')
 .then(function(data){
     console.log('demo1', data);
     return $http.get('/demo2', {params: data.result});
  })
 .then(function(data){
     console.log('demo2', data);
     return $http.get('/demo3', {params: data.result});
  })
 .then(function(data){
     console.log('demo3', data.result);
  });

因为Promise是可以传递的，可以继续then方法延续下去，也可以在纵向扩展的途中改变为其他Promise或者数据。所以在例子中的$http也可以换为其他的Promise（如$timeout，$resource …）。

多个异步任务的并行处理

在有些场景下，我们所要处理的多个异步任务之间并没有像上例中的那么强的依赖关系，只需要在这一系列的异步任务全部完成的时候执行一些特定逻辑。这个时候为了性能的考虑等，我们不需要将它们都串行起来执行，并行执行它们将是一个最优的选择。如果仍然采用回调函数，则这是一个非常恼人的问题。利用Promise则同样可以优雅的解决它：

$q.all([$http.get('/demo1'),
        $http.get('/demo2'),
        $http.get('/demo3')
])
.then(function(results){
    console.log('result 1', results[0]);
    console.log('result 2', results[1]);
    console.log('result 3', results[2]);
});

这样就可以等到一堆异步的任务完成后，在执行特定的业务回调了。在Angular中的路由机制ngRoute、uiRoute的resolve机制也是采用同样的原理：在路由执行的时候，会将获取模板的Promise、获取所有resolve数据的Promise都拼接在一起，同时并行的获取它们，然后等待它们都结束的时候，才开始初始化ng-view、ui-view指令的scope对象，以及compile模板节点，并插入页面DOM中，完成一次路由的跳转并且切换了View，将静态的HTML模板变为动态的网页展示出来。

Angular路由机制的伪代码如下：

    var getTemplatePromise = function(options) {
         // ... 拼接所有template或者templateUrl
    };

    var getResolvePromises = function(resolves) {
        // ... 拼接所有resolve
    };

    var controllerLoader = function(options, currentScope, tplAndVars, initLocals) {
        // ...

        ctrlInstance = $controller(options.controller, ctrlLocals);
        if (options.controllerAs) {
            currentScope[options.controllerAs] = ctrlInstance;
        }

        // ...

        return currentScope;
    };

    var templateAndResolvePromise = $q.all([getTemplatePromise(options)].concat(getResolvePromises(options.resolve || {})));

    return templateAndResolvePromise.then(function resolveSuccess(tplAndVars) {
        var currentScope = currentScope || $rootScope.$new();
        controllerLoader(options, currentScope, tplAndVars, initLocals);
        // ... compile & append dom 
    });

对于这类路由机制的使用，在博主上篇博文《自定义Angular插件 – 网站用户引导》中的ng-trainning插件中也采用了它。关于这段代码的具体分析和应用将在后续单独的文章中，敬请大家期待。

对于同步数据的Promise处理，统一调用接口

有了Promise的处理，因为在前端代码中最多的异步处理就是Ajax，它们都被包装为了Promise .then的风格。那么对于一部分同步的非异步处理呢？如localStorage、setTimeout、setInterval之类的方法。在大多数情况下，博主仍然推荐使用Promise的方式包装，使得项目Service的返回接口统一。这样也便于像上例中的多个异步任务的串行、并行处理。在Angular路由中对于只设置template的情况，也是这么处理的。

对于setTimeout、setInterval在Angular中都已经为我们内置了$timeout和$interval服务，它们就是一种Promise的封装。对于localStorage呢？可以采用$q.when方法来直接包装localStorage的返回值的为Promise接口，如下所示：

    var data = $window.localStorage.getItem('data-api-key');
    return $q.when(data);

整个项目的Service层的返回值都可以被封装为统一的风格使用了，项目变得更加的一致和统一。在需要多个Service同时并行或者串行处理的时候，也变得简单了，一致的使用方式。

对于延迟任务的Promise DSL语义化封装

在前面已经提到Promise是延迟到未来执行某些特定任务，在调用时候则给消费者返回一个”承诺“，消费者线程并不会被阻塞。在消费者接受到”承诺“之后，消费者就不用再关心这些任务是如何完成的，以及督促生产者的任务执行状态等。直到任务完成后，消费者手中的这个”承诺“就被兑现了。

对于这类延迟机制，在前端的UI交互中也是极其常见的。比如模态窗口的显示，对于用户在模态窗口中的交互结果并不可提前预知的，用户是点击”ok“按钮，或者是”cancel“按钮，这是一个未来将会发生的延迟事件。对于这类场景的处理，也是Promise所擅长的领域。在Angular-UI的Bootstrap的modal的实现也是基于Promise的封装。

$modal.open({
    templateUrl: '/templates/modal.html',
    controller: 'ModalController',
    controllerAs: 'modal',
    resolve: {
    }
})
    .result
    .then(function ok(data) {
        // 用户点击ok按钮事件
    }, function cancel(){
        // 用户点击cancel按钮事件
    });

这是因为modal在open方法的返回值中给了我们一个Promise的result对象（承诺）。等到用户在模态窗口中点击了ok按钮，则Bootstrap会使用$q的defer来resolve来执行ok事件；相反，如果用户点击了cancel按钮，则会使用$q的defer来reject执行cancel事件。

这样就很好的解决了延迟触发的问题，也避免了callback的地狱。我们仍然可以进一步将其返回值语义化，以业务自有的术语命名而形成一套DSL API。

 function open(data){
    var defer = $q.defer();

    // resolve or reject defer;

    var promise = defer.promise;
    promise.ok = function(func){
        promise.then(func);
        return promise;
    };

    promise.cancel = function(func){
        promise.then(null, func);
        return promise;
    };

    return promise;
};

则我们可以如下方式来访问它：

$modal.open(item)
   .ok(function(data){
        // ok逻辑
   })
   .cancel(function(data){
       // cancel 逻辑
   });

是不是感觉更具有语义呢？在Angular中$http的返回方法success、error也是同样逻辑的封装。将success的注册函数注册为.then方法的成功回调，error的注册方法注册为then方法的失败回调。所以success和error方法只是Angular框架为我们在Promise语法之上封装的一套语法糖而已。

Angular的success、error回调的实现代码：

  promise.success = function(fn) {
    promise.then(function(response) {
      fn(response.data, response.status, response.headers, config);
    });
    return promise;
  };

  promise.error = function(fn) {
    promise.then(null, function(response) {
      fn(response.data, response.status, response.headers, config);
    });
    return promise;
  };

利用Promise来实现管道式AOP拦截

在软件设计中，AOP是Aspect-Oriented Programming的缩写，意为：面向切面编程。通过编译时（Compile）植入代码、运行期（Runtime）动态代理、以及框架提供管道式执行等策略实现程序通用功能与业务模块的分离，统一处理、维护的一种解耦设计。 AOP是OOP的延续，是软件开发中的一个热点，也是很多服务端框架（如Java世界的Spring）中的核心内容之一，是函数式编程的一种衍生范型。 利用AOP可以对业务逻辑的各个部分进行隔离，从而使得业务逻辑各部分之间的耦合度降低，提高程序的可重用性，同时提高开发效率。 AOP实用的场景主要有：权限控制、日志模块、事务处理、性能统计、异常处理等独立、通用的非业务模块。关于更多的AOP资料请参考http://en.wikipedia.org/wiki/Aspect-oriented_programming。

在Angular中同样也内置了一些AOP的设计思想，便于实现程序通用功能与业务模块的分离、解耦、统一处理和维护。$http中的拦截器（interceptors）和装饰器（$provide.decorator）是Angular中两类常见的AOP切入点。前者以管道式执行策略实现，而后者则通过运行时的Promise管道动态实现的。

首先回顾一下Angular的拦截器实现方式：

// 注册一个拦截器服务
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    // 可选方法
    'request': function(config) {
      // 请求成功后处理
      return config;
    },

    // 可选方法
   'requestError': function(rejection) {
      // 请求失败后的处理
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    },



    // 可选方法
    'response': function(response) {
      // 返回回城处理
      return response;
    },

    // 可选方法
   'responseError': function(rejection) {
      // 返回失败的处理
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    }
  };
});

// 将服务注册到拦截器链中
$httpProvider.interceptors.push('myHttpInterceptor');


// 同样也可以将拦截器注册为一个工厂方法。 但上一中方式更为推荐。
$httpProvider.interceptors.push(['$q', function($q) {
  return {
   'request': function(config) {
       // 同上
    },

    'response': function(response) {
       // 同上
    }
  };
}]);

这样就可以实现对Angular中的$http或者是$resource的Ajax请求拦截了。但在Angular内部是是如何实现这种拦截方式的呢？Angular使用的就是Promise机制，形成异步管道流，将真实的Ajax请求放置在request、requestError和response、responseError的管道中间，因此就产生了对Ajax请求的拦截。

其源码实现如下：

var interceptorFactories = this.interceptors = [];

var responseInterceptorFactories = this.responseInterceptors = [];

this.$get = ['$httpBackend', '$browser', '$cacheFactory', '$rootScope', '$q', '$injector',
  function($httpBackend, $browser, $cacheFactory, $rootScope, $q, $injector) {

    var defaultCache = $cacheFactory('$http');

    var reversedInterceptors = [];

    forEach(interceptorFactories, function(interceptorFactory) {
      reversedInterceptors.unshift(isString(interceptorFactory) ? $injector.get(interceptorFactory) : $injector.invoke(interceptorFactory));
    });

    forEach(responseInterceptorFactories, function(interceptorFactory, index) {
      var responseFn = isString(interceptorFactory) ? $injector.get(interceptorFactory) : $injector.invoke(interceptorFactory);

      reversedInterceptors.splice(index, 0, {
        response: function(response) {
          return responseFn($q.when(response));
        },
        responseError: function(response) {
          return responseFn($q.reject(response));
        }
      });
    });
    ...

function $http(requestConfig) {
  ...

  var chain = [serverRequest, undefined];
  var promise = $q.when(config);

  // apply interceptors
  forEach(reversedInterceptors, function(interceptor) {
    if (interceptor.request || interceptor.requestError) {
      chain.unshift(interceptor.request, interceptor.requestError);
    }
    if (interceptor.response || interceptor.responseError) {
      chain.push(interceptor.response, interceptor.responseError);
    }
  });

  while (chain.length) {
    var thenFn = chain.shift();
    var rejectFn = chain.shift();

    promise = promise.then(thenFn, rejectFn);
  }

  promise.success = function(fn) {
    promise.then(function(response) {
      fn(response.data, response.status, response.headers, config);
    });
    return promise;
  };

  promise.error = function(fn) {
    promise.then(null, function(response) {
      fn(response.data, response.status, response.headers, config);
    });
    return promise;
  };

  return promise;
};

在上面紧接着在$get注入方法之后，Angular会将interceptors和responseInterceptors反转合并到一个reversedInterceptors的拦截器内部变量中保存。最后在$http函数中以[serverRequest, undefined]（serverRequest是Ajax请求的Promise操作）为中心，将reversedInterceptors中的所有拦截器函数依次加入到chain链式数组中。如果是request或requestError，那么就放在链式数组起始位置；相反如果是response或responseError，那么就放在链式数组最后。

注意添加在chain的request和requestError或者response和responseError都一定是成对的，换句话说可能注册一个非空的request与一个为undefined的requestError，或者是一个为undefined的request与非空的requestError。就像chain数组的声明一样（var chain = [serverRequest, undefined];），成对的放入serverRequest和undefined对象到数组中。因为后面的代码将利用Promise的机制注册这些拦截器函数，实现管道式AOP拦截机制。

在Promise中需要两个函数来注册回调，分别为成功回调和失败回调。在这里request和response会被注册成Promise的成功回调，而requestError和responseError则会注册成Promise的失败回调。所以在chain中添加的request和requestError，response或responseError都是成对出现的，这是为了能在接下来的循环中简洁地注册Promise回调函数。 这些被注册的拦截器链，会通过$q.when(config)Promise启动，它会首先传入$http的config对象，并执行所有的request拦截器，依次再到serverRequest这个Ajax请求，此时将挂起后边所有的response拦截器，直到Ajax请求响应完成，再依次执行剩下的response拦截器回调； 如果在request过程中有异常失败则会执行后边的requestError拦截器，对于Ajax请求的失败或者处理Ajax的response拦截器的异常也会被后面注册的responseError拦截器捕获。

从最后两段代码也能了解到关于$http服务中的success方法和error方法，是Angular为大家提供了一种Promise的便捷写法。success方法是注册一个传入的成功回调和为undefined的错误回调，而error则是注册一个为null的成功回调和一个传入的失败回调。

总结

写到这里，本文也进入了尾声。希望大家能够对Promise有一定的理解，并能够”信手拈来“的运用于实际的项目之中，增强代码的可读性和可维护性。在本文中所用到的例子，你都可以在博主的jsbinhttp://jsbin.com/bayeva/edit?html,js,output中找到它们。

另外，同时也欢迎关注博主的微信公众号[破狼]（微信二维码位于博客右侧），这里将会为大家地时间推送博主的最新博文，谢谢大家的支持和鼓励。

来源：http://www.cnblogs.com/whitewolf/archive/2015/10/22/4902570.html