在 JavaScript 这么多年发展中,尤其在前端领域框架层出不穷,解决方案也琳琅满目,Promise 这个思想也逐渐从一个框架层面的实现变成了 ES 的规范,并且越来越多的新 API 都在以 Promise 为基础制定。是时候来看看这个怪物了!

什么是 Promise

在 JavaScript 尤其是前端开发领域,Promise 已经存在不少时日了,有一些曾经广受好评的第三方库,例如 QwhenBluebirdRSVP,基本都曾名噪一时,尽管实现方式/API 不一样,但它们大多都遵循着 Promises/A+ 这个‘事实规范’。而纳入 ES 规范的 Promise API 也是建立在 Promises/A+ 基础上的。

要注意的是,jQuery 虽然有一个类似 Promise 的 API,但是它的 Promise 实际上是被称作为 Deferred 对象的一个东西,它跟 Promises/A+ 的规范是不太兼容。

Promise 主要用来解决 JS 开发中的异步问题,而对异步的处理,社区中也有着不少的解决方案,最多的就是回调这种形式,比如,在 Node.js 中:

doSomeThingAsync(function(error, result) {
  if (error) {
    // 处理错误 error
  }
  // 处理结果 result
});

这种书写上的约定,很容易解决对异步操作的处理,但缺陷是,这样的写法,我们没发直接在异步函数中进行 returnthrow 操作,只能局限于回调的形式中,并且很容易引起回调金字塔的情况。Promise 则对异步处理和处理方法都做了规范和抽象,还给了开发者在异步代码中使用 returnthrow 的能力。而这也是 Promise 存在的真正意义。继续阅读 domenic 的相关解释

语法

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

其中 executor 函数拥有两个参数 resolverejectresolve 用于肯定 Promise,reject 用于否定它,我们可以在相关的操作结束后来执行这两个函数。

可以看到,在语法上看,Promise 还是有点像回调函数那种形式的,囧。不过,和回调函数相比,它的主要不同点在于:

  1. 每一个 Promise 都保证能让我们收到一个值,Promise 便是这个值的代理,而我们无需关心它被创建的时间点,我们更可以在任意时刻注册我们的结果处理函数,即使这个 Promise 已经完成(resolved)了(这时候,所注册的处理函数会被立即执行)。
  2. 每一个 Promise 都只会被成功或失败一次,并且这个状态不会被改变。

一个 Promise,会拥有以下几个状态之一:

  1. pending(等待):操作正在执行中。
  2. fulfilled(完成):操作已经成功执行完毕。
  3. reject(失败):操作执行失败。

某些文章中可能会说到 settled 这个词,settled 代表 Promise 不是 pending 的状态,即:要么是 fulfilled,要么是 reject。但他本身并不是一个状态,只是为了说的时候方便。详见 domenic: States and Fates

Promise 的状态变化图如下:

使用 Promise

创建

创建一个 Promise,直接的方法是直接 new Promise 创建一个,即上文中语法中所述一样。其接受一个 executor 函数作为参数传递,Promise 在 executor 函数中提供了 resolvereject 两个函数供开发者根据实际结果来调用。

在 Promise 对象上,还有 Promise.all(iterable), Promise.race(iterable), Promise.reject(reason), Promise.resolve(value) 四个方法,这些方法也会返回 Promise 对象,因此,我们也可以通过这些方法来直接创建一个方法,例如 var p = Promise.resolve('I am a Promise!');

消费

Promise 一旦创建,我们就可以把它当做一个值来传递,因为 Promise 就是对一个未来会得到的值的代表。因此,你可以将它从函数中返回(return),也可以当做参数来传递到需要的地方,就像传递一个普通的值一样。

消费 Promise,即对 Promise 的所代表的值进行一系列的处理。这里,我们可以使用 .then() 方法。

.then() 方法可以接受两个函数作为参数,第一个参数的函数会在 Promise 完成(fulfilled)的时候被调用,而第二个参数的函数则在 Promise 失败 (rejected)的时候调用。这两个参数都是可以被省略的:

var p = Promise.resolve(1);

p.then((val) => console.log('成功:', val),
       (val) => console.log('失败:', val));
// --> 1

每个 Promise 实例还有一个 .catch() 方法,主要用于对错误的处理,对于 .catch() 的方法理解,其实很简单,它就相当于 .then() 省略第一个参数:

var p = Promise.reject('Ooops');

// .catch()
p.then((val) => console.log('成功:', val))
 .catch((val) => console.log('失败:', val));
// --> 失败: Ooops

// .then(null, fn)
p.then((val) => console.log('成功:', val))
 .then(null, (val) => console.log('失败:', val));
// --> 失败: Ooops

上述两种形式对错误的处理是等效的,当 Promise 失败的时候,两段代码的执行结果一样。不过,一般情况下,更加推荐使用 .catch() 方法来处理错误,因为 catch 本身名字更加直接易懂,并且,在链式调用 Promise 的时候,只需要在调用链最末端使用一个 .catch() 即可。

在 Promise 中,当直接 throw 一个异常的时候,将会使该 Promise 置为 rejected 状态,这里需要注意的是,在 Promise 链中抛出异常,仅仅会将抛出异常所在的 Promise 置为 rejected,而不会影响原始的 Promise,比如:

var p = Promise.resolve(1);

p.then((val) => { throw new Error('Oops') })
 .then((val) => console.log(val))
 .catch((val) => console.log('出错了:', val));
// --> 出错了: Error: Oops

p.then((val) => console.log('仍然成功:', val));
// --> 仍然成功: 1

处理多个异步操作

Promise.all()

在很多时候,我们都希望多个异步操作能够并行,但很多情况下,我们又希望能在这多个异步操作全部都完成后再对结果进行处理,这个时候,我们就会用到 Promise.all(),这个方法接受一个 Promise 数组作为参数,且会在所有 Promise 完成后执行一次回调 .then(),在这里,所有数组中的 Promise 都是并行方式执行的,如下:

Promise.all([p1, p2])
  .then(function(result) {
    // 所有的 Promise 都已经完成
  })
  .catch(function(error) {
    // 或者有 promise 失败(rejected)
  })

注意:只要一旦有一个 promise 失败,.catch() 中的逻辑就会被执行。

Promise.all() 在一些大型 web app 中,将会很有用,因为大多良好的 API 设计都是以数据维度划分,产品的某一个功能,可能会涉及到多个 API 的数据联动,这时候,使用 Promise.all() 即可方便的解决。

Promise.race()

Promise.race() 它同样接受一个 Promise 数组作为参数,顾名思义,'race' 即比赛,想象一下,在平时百米竞赛时候,一旦有人率先冲过终点,那变产生了一个冠军,Promise.race() 即是在数组中的任意一个 Promise 完成后,便会触发 .then() 的逻辑,当然,这里数组中的 Promise 也是并行的:

function delay(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  })
}

Promise.race([
  Promise.resolve(1),
  delay(3000).then(() => 2)
])
.then((val) => console.log('接受到:', val))
.catch((err) => console.log('出错拉:', err));

Promise.race() 的经典使用场景是某个服务有多个互备的形式,而我们需要尽快的拿到结果。

Series

并行很容易,但是 Promise 并没有一个直接使用的串行的方法,当然,结合一些函数式编程的方法,我们可以很简单的自行实现一下:

function makePromise(val) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, (Math.random() * 5000).toFixed(0));
  }).then(() => val);
}

[1, 2, 3, 4, 5].reduce(function(seq, curr) {
  return seq.then(() => makePromise(curr))
            .then((val) => console.log(val));
}, Promise.resolve());

总结

Promise 最近变得越来越火,无论前端领域,例如:Fetch APIBattery API,以及还未完成的 ServiceWorker API 等,甚至在 Node.js 社区中,人气很高的 co,以及 koa 新版本都将 thunk 的形式改为了 Promise,在实际生产中投入使用,阻力也不会太大。

连接

  1. ES 规范
  2. MDN 文档
  3. Can I Use 兼容性参考
  4. es6-promise polyfill