Promise

概述

Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算.。一个 Promise 处于以下四种状态之一:

• pending: 初始状态, 非 fulfilled 或 rejected.
• fulfilled: 成功的操作.
• rejected: 失败的操作.
• settled: Promise已被fulfilled或rejected，且不是pending

语法

new Promise(executor);
new Promise(function(resolve, reject) { ... });

参数

executor

函数对象，带有两个实参 resolve 和 reject. 第一个参数用来完成(fulfill)当前promise，第二个参数则用来拒绝(reject). 一旦我们的操作完成即可调用这些函数.

描述

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

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

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

属性

Promise.length

长度属性，其值为 1 (构造器参数的数目).

Promise.prototype

表示 Promise 构造器的原型.

方法

Promise.all(iterable)

返回一个promise，当iterable参数里所有的promise都被解决后，该promise也会被解决。

Promise.race(iterable)

返回一个Promise，当iterable参数里的任意一个子Promise被接受或拒绝后，该promise马上也会用子Promise的成功值或失败原因被接受或拒绝。

Promise.reject(reason)

用失败原因reason拒绝一个Promise对象。

Promise.resolve(value)

用成功值value解决一个Promise对象。如果该value为可继续的（thenable，即带有then方法），返回的Promise对象会“跟随”这个value，采用这个value的最终状态；否则的话返回值会用这个value满足（fullfil）返回的Promise对象。

Promise原型

属性

Promise.prototype.constructor

返回创建了实例原型的函数.  默认为 Promise 函数.

方法

Promise.prototype.catch(onRejected)

添加一个否定(rejection) 回调到当前 promise, 返回一个新的promise。如果这个回调被调用，新 promise 将以它的返回值来resolve，否则如果当前promise 进入fulfilled状态，则以当前promise的肯定结果作为新promise的肯定结果.

Promise.prototype.then(onFulfilled, onRejected)

添加肯定和否定回调到当前 promise, 返回一个新的 promise, 将以回调的返回值 来resolve.

示例

创建Promise

<button id="btn">Make a promise!</button>

这个小例子展示了Promise的机制。每当<button>被按下时，testPromise() 函数就会被执行。该函数会创建一个用window.setTimeout在1到3秒（随机）后用‘result’字符串解决的promise。

这里通过p1.then方法的满足回调，简单的输出了promise的满足过程，这些输出显示了该方法的同步部分是如何和promise的异步解决解耦的。

var promiseCount = 0;
function testPromise() {
  var thisPromiseCount = ++promiseCount;

  var log = document.getElementById('log');
  log.insertAdjacentHTML('beforeend', thisPromiseCount + 
      ') 开始(同步代码开始)');

  // 我们创建一个新的promise: 然后用'result'字符串解决这个promise (3秒后)
  var p1 = new Promise(
    // 解决函数带着解决（resolve）或拒绝（reject）promise的能力被执行
    function(resolve, reject) {       
      log.insertAdjacentHTML('beforeend', thisPromiseCount + 
          ') Promise开始(异步代码开始)');

      // 这只是个创建异步解决的示例
      window.setTimeout(
        function() {
          // 我们满足（fullfil）了这个promise!
          resolve(thisPromiseCount)
        }, Math.random() * 2000 + 1000);
    });

  // 定义当promise被满足时应做什么
  p1.then(
    // 输出一段信息和一个值
    function(val) {
      log.insertAdjacentHTML('beforeend', val +
          ') Promise被满足了(异步代码结束)'
        );
    });

  log.insertAdjacentHTML('beforeend', thisPromiseCount + 
      ') 建立了Promise(同步代码结束)
');
}

if ("Promise" in window) {
  btn = document.getElementById("btn");
   btn.addEventListener("click",testPromise);
}
else {
  log = document.getElementById('log');
  log.innerHTML = "Live example not available as your browser doesn't support the Promise interface.";
}

这个例子在按钮被按下后执行。你需要一个支持Promise的浏览器。你能通过短时间内按多次按钮看到不同的promise一个接一个的被满足。

使用XHR读取图像

另一个用了Promise和XMLHttpRequest读取一个图像的例子可在MDN GitHub promise-test 中找到。 你也可以 see it in action。每一步都有注释可以让你详细的跟随了解Promise和XHR架构。

规范

浏览器兼容性

[1] Gecko 24 has an experimental implementation of Promise, under the initial name of Future. It was renamed to its final name in Gecko 25, but disabled by default behind the flag dom.promise.enabled. Bug 918806 enabled Promises by default in Gecko 29.

参见

• Promises/A+ specification
• Jake Archibald: JavaScript Promises: There and Back Again
• Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patter in JavaScript
• Matt Greer: JavaScript Promises ... In Wicked Detail
• Forbes Lindesay: promisejs.org