理解 Promise 的工作原理

什么是 Promise

一个 Promise 对象代表一个目前还不可用，但是在未来的某个时间点可以被解析的值。它允许你以一种同步的方式编写异步代码。例如，如果你想要使用Promise API 异步调用一个远程的服务器，你需要创建一个代表数据将会在未来由 web 服务返回的 Promise 对象。唯一的问题是目前数据还不可用。当请求完成并从服务器返回时数据将变为可用数据。在此期间，Promise 对象将扮演一个真实数据的代理角色。接下来，你可以在 Promise 对象上绑定一个回调函数，一旦真实数据变得可用这个回调函数将会被调用。

Promise 对象曾经以多种形式存在于许多语言中。

去除厄运的回调金字塔(Pyramid of Doom)

Javascript 中最常见的反模式做法是回调内部再嵌套回调。

// 回调金字塔 asyncOperation(function(data){   // 处理 `data`   anotherAsync(function(data2){       // 处理 `data2`       yetAnotherAsync(function(){           // 完成       });   }); }); 

引入 Promises 之后的代码

promiseSomething() .then(function(data){     // 处理 `data`     return anotherAsync(); }) .then(function(data2){     // 处理 `data2`     return yetAnotherAsync(); }) .then(function(){     // 完成 }); 

Promises 将嵌套的 callback，改造成一系列的 .then 的连缀调用，去除了层层缩进的糟糕代码风格。Promises 不是一种解决具体问题的算法，而已一种更好的代码组织模式。接受新的组织模式同时，也逐渐以全新的视角来理解异步调用。

各个语言平台都有相应的 Promise 实现

• Java's java.util.concurrent.Future
• Python's Twisted deferreds and PEP-3148 futures
• F#'s Async
• .Net's Task
• C++ 11's std::future
• Dart's Future
• Javascript's Promises/A/B/D/A+

下面我来相信了解一下 javascript 语言环境下各个规范的一些细节。

Promises/A 规范

promise 表示一个最终值，该值由一个操作完成时返回。

• promise 有三种状态：**未完成** (unfulfilled)，**完成** (fulfilled) 和**失败** (failed)。
• promise 的状态只能由**未完成**转换成 完成 ，或者**未完成**转换成**失败** 。
• promise 的状态转换只发生一次。

promise 有一个 then 方法，then 方法可以接受 3 个函数作为参数。前两个函数对应 promise 的两种状态 fulfilled 和 rejected 的回调函数。第三个函数用于处理进度信息（对进度回调的支持是可选的）。

promiseSomething().then(function(fulfilled){         //当promise状态变成fulfilled时，调用此函数     },function(rejected){         //当promise状态变成rejected时，调用此函数     },function(progress){         //当返回进度信息时，调用此函数     }); 

如果promise支持如下连个附加方法，称之为 可交互的 promise

• get(propertyName)
  获得当前 promise 最终值上的一个属性，返回值是一个新的 promise。
• call(functionName, arg1, arg2, ...)
  调用当然 promise 最终值上的一个方法，返回值也是一个新的promise。

Promises/B 规范

在 Promises/A 的基础上，Promises/B 定义了一组 promise 模块需要实现的 API

• 第一个参数接受一个描述对象，该对象结构如下，

  { "when": function(errback){...}, "get": function(name){...}, "put": function(name, value){...}, "post": function(name, args){...}, "del": function(name){...}, }
  

  上面每一个注册的 handle 都返回一个 resolved value或者 promise。

• 第二个参数接受一个 fallback(message,...args) 函数，当没有 promise 对象没有找到对应的 handle 时该函数会被触发，返回一个 resolved value 或者 promise。

Promises/D 规范

为了增加不同 promise 实现之间的可互操作性，Promises/D 规范对promise 对象和 Promises/B 规范做了进一步的约定。以达到鸭子类型的效果（Duck-type Promise）。

简单来说Promises/D 规范，做了两件事情，

1. 如何判断一个对象是 Promise 类型。
2. 对 Promises/B 规范进行细节补充。

甄别一个 Promise 对象

对 Promises/B 规范的补充

Promises/D 规范中对 Promises/B 规范中定义的ref、reject、def、defer方法做了进一步细致的约束，此处略去这些细节。

Promises/A+ 规范

前面提到的 Promises/A/B/D 规范都是有CommonJS组织提出的，Promises/A+是有一个自称为 Promises/A+ 组织 发布的，该规范是以Promises/A作为基础进行补充和修订，旨在提高promise实现之间的可互操作性。

Promises/A+ 对 .then 方法进行细致的补充，定义了细致的 Promise Resolution Procedure 流程，并且将 .then 方法作为promise的对象甄别方法。

此外，Promises/A+ 还提供了兼容性测试工具，以确定各个实现的兼容性。

实现一个迷你版本的Promise

上面扯了这么多规范，现在我们看看如何实现一个简单而短小的Promise。

状态机

var PENDING = 0; var FULFILLED = 1; var REJECTED = 2;  function Promise() {   // store state which can be PENDING, FULFILLED or REJECTED   var state = PENDING;    // store value or error once FULFILLED or REJECTED   var value = null;    // store sucess & failure handlers attached by calling .then or .done   var handlers = []; } 

状态变迁

仅支持两种状态变迁，fulfill和reject

// ...  function Promise() {     // ...    function fulfill(result) {     state = FULFILLED;     value = result;   }    function reject(error) {     state = REJECTED;     value = error;   }  } 

fulfill和reject方法较为底层，通常更高级的resolve方法开放给外部。

// ...  function Promise() {    // ...    function resolve(result) {     try {       var then = getThen(result);       if (then) {         doResolve(then.bind(result), resolve, reject)         return       }       fulfill(result);     } catch (e) {       reject(e);     }   } } 

resolve方法可以接受一个普通值或者另一个promise作为参数，如果接受一个promise作为参数，等待其完成。promise不允许被另一个promise fulfill，所以需要开放resolve方法。resolve方法依赖一些帮助方法定义如下:

/**  * Check if a value is a Promise and, if it is,  * return the `then` method of that promise.  *  * @param {Promise|Any} value  * @return {Function|Null}  */ function getThen(value) {   var t = typeof value;   if (value && (t === 'object' || t === 'function')) {     var then = value.then;     if (typeof then === 'function') {       return then;     }   }   return null; }  /**  * Take a potentially misbehaving resolver function and make sure  * onFulfilled and onRejected are only called once.  *  * Makes no guarantees about asynchrony.  *  * @param {Function} fn A resolver function that may not be trusted  * @param {Function} onFulfilled  * @param {Function} onRejected  */ function doResolve(fn, onFulfilled, onRejected) {   var done = false;   try {     fn(function (value) {       if (done) return       done = true       onFulfilled(value)     }, function (reason) {       if (done) return       done = true       onRejected(reason)     })   } catch (ex) {     if (done) return     done = true     onRejected(ex)   } } 

这里resolve和doResolve之间的递归很巧妙，用来处理promise的层层嵌套（promise的value是一个promise）。

构造器

// ...  function Promise(fn) {     // ...     doResolve(fn, resolve, reject); } 

.done方法

// ... function Promise(fn) {   // ...    function handle(handler) {     if (state === PENDING) {       handlers.push(handler);     } else {       if (state === FULFILLED &&         typeof handler.onFulfilled === 'function') {         handler.onFulfilled(value);       }       if (state === REJECTED &&         typeof handler.onRejected === 'function') {         handler.onRejected(value);       }     }   }    this.done = function (onFulfilled, onRejected) {     // ensure we are always asynchronous     setTimeout(function () {       handle({         onFulfilled: onFulfilled,         onRejected: onRejected       });     }, 0);   }   // ... } 

.then方法

// ... function Promise(fn) {     // ...     this.then = function (onFulfilled, onRejected) {       var self = this;       return new Promise(function (resolve, reject) {         return self.done(function (result) {           if (typeof onFulfilled === 'function') {             try {               return resolve(onFulfilled(result));             } catch (ex) {               return reject(ex);             }           } else {             return resolve(result);           }         }, function (error) {           if (typeof onRejected === 'function') {             try {               return resolve(onRejected(error));             } catch (ex) {               return reject(ex);             }           } else {             return reject(error);           }         });       });     }     // ... } 

$.promise

jQuery 1.8 之前的版本，jQuery的 then 方法只是一种可以同时调用 done 、fail 和 progress 这三种回调的速写方法，而 Promises/A 规范的 then 在行为上更像是 jQuery 的 pipe。 jQuery 1.8 修正了这个问题，使 then 成为 pipe 的同义词。不过，由于向后兼容的问题，jQuery 的 Promise 再如何对 Promises/A 示好也不太会招人待见。

此外，在 Promises/A 规范中，由 then 方法生成的 Promise 对象是已执行还是已拒绝，取决于由 then 方法调用的那个回调是返回值还是抛出错误。在 JQuery 的 Promise 对象的回调中抛出错误是个糟糕的主意，因为错误不会被捕获。

小结

最后一个例子揭示了，实现 Promise 的关键是实现好 doResolve 方法，在完事以后触发回调。而为了保证异步 setTimeout(fun, 0); 是关键一步。

Promise 一直用得蛮顺手的，其很好的优化了 NodeJS 异步处理时的代码结构。但是对于其工作原理却有些懵懂和好奇。于是花了些经理查阅并翻译了Promise 的规范，以充分的理解 Promise 的细节。

参考阅读

1. Promises/A
2. Promises/B
3. Promises/D
4. Promisejs
5. Promises/A+
6. As soon as possible
7. A minimalist implementation of a javascript promise
8. Lightweight implementation of promises
9. How is a promise/defer library implemented?
10. Basic Javascript promise implementation attempt
11. You're Missing the Point of Promises
12. Boom! Promises/A+ Was Born
13. Futures and promises
14. JavaScript Promises - There and back again