Promise的前世今生-阿里云开发者社区

原作者：@洗影

Promise 的历史

Promise 是一个古老的概念（最初提出于 1976 年），通常与 future 结合在一起。Future 指的是未来的值，通常在 Promise 里被作为参数和返回值传来传去（但是在有的语境下 Future 又被用来指代类似 Promise 的东西。下文中，我们所说的 future 表示第一种概念）。

Promise 只是一个概念，很多常见语言的标准库都有 Promise 关联的特性（比如 C++ 11 的 std::promise 和 std::future、Java 8 的 java.util.concurrent.Future、Python 3.2+ 的 concurrent.futures等）。即使标准库里没有，大部分语言里也有第三方实现的 Promise（比如 Ruby 的 Promise gem）。这里主要讨论 JavaScript，特别是 ECMAScript 2015 中的 Promise。

在 JavaScript 的世界里，最早得到广泛使用的 Promise 是 jQuery 的 AJAX 模块中出现的 jQuery.Deferred()。Promise/A+ 标准规定了一系列 API，并配有大量的测试用例，ECMAScript 2015 直接整合了这个标准。

Promise/A+ 提供的 API 非常有限，很多 Promise 库（Q、bluebird 等）在兼容 Promise/A+ 的基础上添加了一些其他的扩展。jQuery 3.0 也已经将 Deferred 迁移成了与 Promise/A+ 兼容。

Promise 的三种状态

依照 Promise/A+ 的定义，Promise 有三种状态：

pending: 初始状态，表示既不是 fullfilled，也不是 rejected
fulfilled: 表示操作完成
rejected: 表示操作失败

另外， fulfilled 与 rejected 一起合称 settled。

Promise 的构造函数

构造一个 Promise，最基本的用法如下：

var promise = new Promise(function(resolve, reject) {
    if (...) {  // succeed
        resolve(result);
    } else {   // fails
        reject(Error(errMessage));
    }
});

实例：将 `XMLHttpRequest` Promise 化

var ajax = (function() {
  'use strict';
  var DONE = 4,
      OK = 200;

  function serialize(obj) {
     var str = [];
     for(var p in obj) {
         if (obj.hasOwnProperty(p)) {
             str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
         }
     }
     return str.join("&");
  }

  function core(method, url, data, headers) {
    if (method === 'GET' && data) {
      url += '?' + serialize(data);
    }

    // Establishing a promise in return
    return new Promise(function(resolve, reject) {
      // Instantiates the XMLHttpRequest
      var xhr = new XMLHttpRequest();
      xhr.open(method, url, true);

      if (headers) {
        for (var key in headers) {
          if (headers.hasOwnProperty(key)) {
            xhr.setRequestHeader(key, headers[key])
          }
        }
      }

      xhr.onreadystatechange = function(e) {
        if (xhr.readyState === DONE) {
          if (xhr.status === OK) {  // pass to then arg1
            resolve(xhr.responseText);
          } else {  // pass to catch/then arg2
            reject(Error(xhr.statusText));
          }
        }
      };

      xhr.onerror = function(e) {
        reject(Error("XMLHttpRequest failed"));
      }

      if (method === 'GET' || !data) {
        xhr.send();
      } else {
        xhr.send(data);
      }
    });
  }

  return {
    'get': function(url, data, headers) {
      return core('GET', url, data, headers);
    },
    'post': function(url, data, headers) {
      return core('POST', url, data, headers);
    },
    'put': function(url, data, headers) {
      return core('PUT', url, data, headers);
    },
    'delete': function(url, headers) {
      return core('DELETE', url, headers);
    }
  };
}());

Instance method

Promise 实例拥有 then 方法（具有 then 方法的对象，通常被称为 thenable）。它的使用方法如下：

`promise.then(onFulfilled, onRejected)`

接收两个函数作为参数，一个在 fulfilled 的时候被调用，一个在 rejected 的时候被调用，接收参数就是 future，onFulfilled 对应 resolve, onRejected 对应 reject。

var promise = new Promise(function(resolve, reject) {
    if (someCondition) {  // succeed
        resolve(1);
    } else {   // fails
        reject("err");
    }
});

promise.then(function(future) {
    console.log(future);  // log 1 if someCondition = true
    return 2;
}, function(err) {
    console.log(err);  // log err if someCondition = false
}).then(function(future) {
    console.log(future);  // log 2 if someCondition = true
});

如果 Promise 被 reject，后面的 then 又没有指定 onRejected，会往后面的 then 的 onRejected 传递 future。

var promise = new Promise(function(resolve, reject) {
    reject("err");
});

promise.then(function(future) {
    console.log(future);   // won't get in here
    return 2;
}).then(function(future) {
    console.log(future);   // won't get in here
}, function(err) {
    console.log(err + " catched in 2nd then"); // log: err catched in 2nd then
});

如果 Promise 被 onRejected 处理，那么 onRejected 的返回值（future）会传给下一个 then 的 onFulfilled。

var promise = new Promise(function(resolve, reject) {
    reject("err");
});

promise.then(function(future) {
    console.log(future);
    return 2;
}, function(err) {
    console.log(err);  // log: err
    return "return value in first onRejected"
}).then(function(future) {
    console.log(future); // log: return value in first onRejected
});

如果返回了一个 Promise，在后面的 then 的参数里会被拆开，所以得到的还是 future。这个特性与函数式编程中的 Monad) 有异曲同工之妙：

var promise = new Promise(function(resolve, reject) {
    resolve(1);
});

promise.then(function(future) {
    console.log(future);  // log: 1
    return new Promise(function(resolve, reject) {
        resolve("future in the first then");
    });
}).then(function(future) {
    console.log(future);  // log: future in the first then
});

`promise.catch(onRejected)`

promise.catch(onRejected) 等于 promise.then(undefined, onRejected)。未实现 ES5 的环境下（e.g. IE8） catch 作为对象的属性时依然属于保留字，会报错，可以用 promise["catch"] 绕过。

使用之前的例子

var p = ajax
  .get('http://foo.com/api/normal/123', {id: 1234})
  .then(function(response) {
    console.log(response);
    var data = JSON.parse(response);
    return ajax.post('http://foo.com/api/normal',
        JSON.stringify({id: data.content}),
        { "Content-Type": "application/json" });
  }).then(function(response) {
    console.log(response);
  }).catch(function(err) {
    console.log(err);
  });

Static method

`Promise.all(iterable)`

参数中所有的 Promise resolve 后，then 里包含这些 Promise 的 future。

Promise.all([promise1, promise2, promise3]).then(function(futures) {
    console.log(futures); // [future1, future2, future]
});

`Promise.race(iterable)`

参数中任一 Promise resolve 后，then 里包含最快 resolve 的那个 Promise 的结果。

Promise.race([promise1, promise2, promise3]).then(function(future) {
    console.log(future); // future1 if promise1 is resolved first, etc.
});

`Promise.resolve(...)`

快速创建一个 Promise，如果参数原来是 Promise，返回值跟原来的 Promise 一致，如果原来不是 Promise，参数值会被包装给 then 的第一个参数函数，所以可以用来封装不确定是不是 Promise 的值。

Promise.resolve(1);

// is equivalent to
new Promise(function(resolve, reject) {
    resolve(1);
})

Promise.resolve(1).then(function(future) {
    console.log(future);  // 1
});

Promise.resolve(promise).then(function(future) {
    console.log(future);
});

// is equivalent to
promise.then(function(future) {
    console.log(future);
});

`Promise.reject(...)`

快速创建一个被 reject 的 Promise，如果参数原来是 Promise，返回值跟原来的 Promise 一致，如果原来不是 Promise，参数值会被包装给 then 的第二个参数函数或者 catch，所以可以用来封装不确定是不是 Promise 的值。

Promise.reject("err");

// is equivalent to
new Promise(function(resolve, reject) {
    reject("err");
})

Promise.reject(1).catch(function(future) {
    console.log(future);  // 1
});

Promise.resolve(promise).catch(function(future) {
    console.log(future);
});

// is equivalent to
promise.catch(function(future) {
    console.log(future);
});

用例

使用 Promise，完成运行时才能确定执行顺序的串行逻辑

假设我们有一些串行的操作，每一步分别写在一个函数里，并且这些函数的返回值都是 Promise，参数接口也统一，在知道它们的执行顺序（如 A-B-C-D）时，我们可以这样写：

A(1).then(B).then(C).then(D);

然而如果它们具体的执行顺序（比如是 A-B-C-D 还是 B-C-A-D）需要在运行时确定，那就无法将这个顺序写在代码里。这个时候我们可以在运行时将函数按顺序放入一个数组 operations，利用 Promise 进行串行执行：

var promise = undefined
for (var i = 0; i < operations.length; ++i) {
  if (typeof promise == 'undefined')
    promise = operations[i];
  else
    promise = promise.then(operations[i]);
}

完成需要多种数据源就绪后才能执行的操作

假设渲染一个页面，需要获取多个表的数据，全部就绪后交给模板引擎。如果数据库操作均有提供 Promise 的接口（如 mongoose）：

var userPromise = userdb.query(...);  // promise
var postPromise = postdb.query(...);  // promise
var replyPromise = replydb.query(...);

Promise.all([userPromise, postPromise, replyPromise])
.then(function(result) {
  template.render({
    user: result[0],
    post: result[1],
    reply: result[2]
  });
});

注：如果觉得这里接收参数时硬写下标比较丑，可以借助 ES2015 引入的 destructuring 语法糖：

Promise.all([userPromise, postPromise, replyPromise])
.then(function([user, post, reply]) {
  template.render({
    user: user,
    post: post,
    reply: reply
  });
});

完成有依赖的的串行查询

利用在 then 接收的函数里返回 Promise，下一个 then 接收的函数里能得到这个 Promise 拆开后的内容的特性，串行查询的编写就能干净许多。如果原来是回调风格的 API，大约会是这样：

userdb.query(userid, function(err, user) {
  if (err !== null) {
    // error handling
  }
  postdb.query(user.latestPost.id, function(err, post) {
    if (err !== null) {
      // error handling
    }
    replydb.query(post.latestReply.id, function(err, reply) {
      if (err !== null) {
        // error handling
      }
      // use reply to do something...
    });
  });
})

如果依赖一多，回调套回调，就会产生 pyramid of doom) 的效果。如果数据源能提供 Promise 风格的 API，写起来大约是这样：

userdb.query(userid)
.then(function(user) {
  return postdb.query(user.latestPost.id);
}).then(function(post) {
  return replydb.query(post.latestReply.id);
}).then(function(reply) {
  // use reply to do something...
}).catch(function(reason) {
   // error handling
});

虽然还是有一些多余的代码，但是依赖较多时，代码形状不会横向发展，可维护性有所提升，而且可以集中处理错误。

需要注意的是，Promise 仅仅是一层建立在语言之上的抽象，即使代码运行的 JavaScript 环境不提供，也可以使用 polyfill 或者添加了额外扩展的库来提供支持。在编写异步逻辑的时候，使用 Promise 能够在对运行环境侵入性较小的前提下，一定程度上改善代码的可维护性，但依然会出现一些繁琐的 boilerplate code。在能够掌控运行环境（例如 Node.js）的情况下，在 Promise 这个基础设施之上，我们还有更多的语法特性来提高代码的可维护性。

Promises 与 generators

使用 ES 2015 中的 generator，加上一个 spawn helper，用 promise 编写异步逻辑能够更加顺畅。(这里的 spawn 类似于库 co 所提供的功能，虽然 co 更加强大)

这里我们配合 ES 2015 的 arrow function 看看示例（因为支持 generator 的环境，多半也支持 arrow function）。假设有如下两种操作（异步＋同步）：

function asyncOperation() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(Math.random());
    }, Math.random() * 3000);
  });
}

function syncOperation(value) {
  console.log(value);
}

编写一个 spawn helper 如下（使用了 arrow function，改写自 ES2016 spec 中的参考实现）

// Taken from the spec, modified with ES6
function spawn(genF, self) {
  return new Promise((resolve, reject) => { 
    let gen = genF.call(self);  // get the iterator out of the generator

    // nextF could return a generator
    // that throws or returns values/Promises
    function tick(nextF) {

      let next;

      try {
        next = nextF();  // yield is executed here
      } catch(e) {
        reject(e);  // fails
        return;
      }

      if (next.done) {  // finished and succeed
        // spawn finished, next.value be will passed
        // to the then() of the spawn return value
        resolve(next.value);
        return;
      } else { // succeed but not finished i.e. more yield
        // wrap it and pass to next tick
        Promise.resolve(next.value)
        .then( v => {
            tick(() => gen.next(v));  // pass outside
        }, e => {
            tick(() => gen.throw(e));  // throw outside
        });  // pass the async result to tick
      }
    }

    tick(() => gen.next(undefined));  // kickoff
  });
}

使用方法如下，少了许多冗余代码，清晰不少（另外，如果有错误，在这段逻辑里编写 try-catch 后，Promise 中 reject 的结果就可以被捕获）：

spawn(function* doWork() {
  console.log("start");

  // what passed to next() will be yielded here
  let a = yield asyncOperation();
  syncOperation("first async result: " + a);
  let b = yield asyncOperation();
  syncOperation("second async result: " + b);
  let c = yield asyncOperation();
  syncOperation("third async result: " + c);

  console.log("done");
  return a + b + c;  // this will be resolved
}, this)
.then(result => console.log("Final result: " + result));

Promises and async/await

结合 ES 2016 的 async function，就不需要自己准备一个 spawn helper 了。

async function fn(/* args */) {
    /* body */
}

相当于

function fn(/* args */) {
    return spawn(function*() {
        /* body */
    }, this);
}

在 generator 中用 yield 与 Promise 交互，在 async function 中则用 await：

async function doWork() {
  console.log("start");
  let a = await asyncOperation();
  syncOperation("first async result: " + a);
  let b = await asyncOperation();
  syncOperation("second async result: " + b);
  let c = await asyncOperation();
  syncOperation("third async result: " + c);
  console.log("done");
  return a + b + c;
}


let result = await doWork();
console.log("Final result: " + result);

纯 Promise、generator、async/await 的对比

这个例子来自 async/await 的 spec。

只使用 Promise 抽象：

function chainAnimationsPromise(elem, animations) {
    let ret = null;
    let p = currentPromise;
    for(const anim of animations) {
        p = p.then(function(val) {
            ret = val;
            return anim(elem);
        })
    }
    return p.catch(function(e) {
        /* ignore and keep going */
    }).then(function() {
        return ret;
    });
}

使用 generator 后，更少 boilerplate code，错误处理可以使用 try-catch 也更加清晰，但是需要一个 spawn helper:

function chainAnimationsGenerator(elem, animations) {
    return spawn(function*() {
        let ret = null;
        try {
            for(const anim of animations) {
                ret = yield anim(elem);
            }
        } catch(e) { /* ignore and keep going */ }
        return ret;
    });
}

使用 async/await，几乎没有 boilerplate code，直接写逻辑即可，而且不需要自己写 spawn：

async function chainAnimationsAsync(elem, animations) {
    let ret = null;
    try {
        for(const anim of animations) {
            ret = await anim(elem);
        }
    } catch(e) { /* ignore and keep going */ }
    return ret;
}

Promise 的相关应用

Promise 更多地像一个基础设施，在这种抽象之上已经建立起了不少库与 API：

Fetch API，XMLHttpRequest 的继任者
与 Service Worker 相伴的 Cache API
rethinkDB、Mongoose(MongoDB ODM)、falcor
Koa（express 的继任者，基于 co）

Promise的前世今生

Promise 的历史

Promise 的三种状态

Promise 的构造函数

实例：将 `XMLHttpRequest` Promise 化

Instance method

`promise.then(onFulfilled, onRejected)`

`promise.catch(onRejected)`

使用之前的例子

Static method

`Promise.all(iterable)`

`Promise.race(iterable)`

`Promise.resolve(...)`

`Promise.reject(...)`

用例

使用 Promise，完成运行时才能确定执行顺序的串行逻辑

完成需要多种数据源就绪后才能执行的操作

完成有依赖的的串行查询

Promises 与 generators

Promises and async/await

纯 Promise、generator、async/await 的对比

Promise 的相关应用

参考／深入阅读

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Promise的前世今生

Promise 的历史

Promise 的三种状态

Promise 的构造函数

实例：将 XMLHttpRequest Promise 化

Instance method

promise.then(onFulfilled, onRejected)

promise.catch(onRejected)

使用之前的例子

Static method

Promise.all(iterable)

Promise.race(iterable)

Promise.resolve(...)

Promise.reject(...)

用例

使用 Promise，完成运行时才能确定执行顺序的串行逻辑

完成需要多种数据源就绪后才能执行的操作

完成有依赖的的串行查询

Promises 与 generators

Promises and async/await

纯 Promise、generator、async/await 的对比

Promise 的相关应用

参考／深入阅读

热门文章

最新文章

相关电子书

实例：将 `XMLHttpRequest` Promise 化

`promise.then(onFulfilled, onRejected)`

`promise.catch(onRejected)`

`Promise.all(iterable)`

`Promise.race(iterable)`

`Promise.resolve(...)`

`Promise.reject(...)`