Promise特性总结

Promise 对象代表着一个还未完成，但预期将来会完成的操作，该新特性属于 ECMAScript 2015（ES6）规范。
使用 Promise 对象，可以十分方便的摆脱层层嵌套的异步操作回调函数，而以同步操作的流程书写代码。
Promise 对象主要具有以下两个特点：

1. Promise 对象的状态只受构造函数内的同步或者一步操作影响，其他外部操作无法改变 Promise 对象的状态。
2. Promise 对象的状态改变，只会从 pending 变为 resolved 或者从 pending 变为rejected，状态改变后不再会发生改变。

浏览器兼容性

Chrome	Edge	Firefox	IE	Opera	Safari
32.0	Yes	29.0	未实现	19	7.1

Promise Constructor

Promise 对象构造器接受一个带有 resolve 和 reject 两个参数的函数，resolve 用于处理执行成功的场景，reject 用于处理执行失败的场景，我们可以根据执行结果决定调用哪个函数处理。

new Promise(function(resolve, reject) { … });

Promise对象有以下几种状态:

• pending: 初始状态；
• resolved: 成功的操作，又称fulfilled；
• rejected: 失败的操作。

示例如下：

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

  console.log(thisPromiseCount + ') 开始(同步代码开始)');

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

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

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

  console.log(thisPromiseCount + ') 建立了Promise(同步代码结束)');
}
testPromise();
testPromise();
testPromise();

输出：

1) 开始(同步代码开始)
1) Promise开始(异步代码开始)
//等待若干秒
1) 建立了Promise(同步代码结束)
2) 开始(同步代码开始)
2) Promise开始(异步代码开始)
//等待若干秒
2) 建立了Promise(同步代码结束)
3) 开始(同步代码开始)
3) Promise开始(异步代码开始)
//等待若干秒
3) 建立了Promise(同步代码结束)

Promise 对象和其原型对象定义几个非常有用的方法：

Promise.prototype.then

then() 方法接收两个函数作为参数，并分别作为 success 和 failure 状态的回调函数，then() 方法返回一个 Promise 对象。

语法

p.then(function(succData){}, function(errData){})
p.then(function(){})

then() 的第二个参数通常省略，因为无法捕获当前then() 函数的异常，而用统一的 catch() 函数进行异常处理，下节详述

then() 使用

then() 方法返回 Promise 对象，因此可以链式调用，而前一个 then() 函数的返回值将会被作为参数传递给下一个 then() 函数：

var p = new Promise(function(resolve, reject) {
  resolve("SUCCESS");
  //or
  //reject("FAILURE");
});

p.then(function(succData){
  console.log(succData);//success
}, function(errData){
  console.log(errData);//failure
});

链式调用：

then() 方法返回 Promise 对象，因此可以链式调用，而前一个 then() 函数的返回值将会被作为参数传递给下一个 then() 函数：

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

p.then(function(val) {
  console.log(val); // 1
  return val + 1;
}).then(function(val) {
  console.log(val); // 2
}).then(function(val) {
  console.log(val); // 3
});

Promise.prototype.catch

catch() 函数处理 Promise 失败的情形，即在 Promise 中调用了 reject(data) 的情形， 也可以捕获 then() 函数中抛出的错误。

语法

p.catch(function(errData){})

catch使用

var p = new Promise(function(resolve, reject) {
  //resolve("SUCCESS");
  //or
  reject("FAILURE");
});

p.then(function(succData){
  console.log(succData);//success
}).catch(function(errData){
  console.log(errData);//failure
});
//实际上等同于
p.then(function(succData){
  console.log(succData);//success
}.then(null, function(errData){
  console.log(errData);//failure
});

捕获 Promise 的错误

catch 也能捕获 promise语句中的错误，这种情况类似于在 promise 中调用 reject。

var p = new Promise(function(resolve, reject) {
  throw("FAILURE");
});

p.then(function(succData){
  throw new Error('FAILURE'); //不执行
}).catch(function(errData){
  console.log(errData);//FAILURE
});

捕获 then 函数的错误

var p = new Promise(function(resolve, reject) {
  resolve("SUCCESS");
});

p.then(function(succData){
  throw new Error('FAILURE');
}).catch(function(errData){
  console.log(errData);//FAILURE
});

catch 也支持链式调用

Promise 的错误总是向后抛给 catch 处理的，而 catch 的返回值也是 Promise 因此后一个 catch() 可以处理前一个 catch() 中抛出的错误

建议统一使用 catch 处理异常

尽管通过 then() 方法传递第二个参数可以处理异常，但是无法处理此个 then() 内的异常：

var p = new Promise(function(resolve, reject) {
  reject(FAILURE1);
});

p.catch(function(errData){
  console.log(errData);//FAILURE1
  throw new Error('FAILURE2');
}).catch(function(errData){
  console.log(errData);//FAILURE2
});

Promise.all

Promise.all 方法是 Promise 的一个静态方法，将多个 promise 实例（p1, p2, p3）包装成一个新的 promise 实例（p），此时会有两种执行结果：

1. p 会等所有 promise（ p1, p2, p3 ）都被 resolve 后 resolve，此时将这些 promise （ p1, p2, p3 ）的返回值组成一个数组([p1,p2,p3])，传递给 p 的回调函数；
2. 如果 p1, p2, p3 中有一个被 reject 则该 reject ，并将该 reject的返回值传递给 p 的回调函数 。

语法：

Promise.all(iterable)

iterable 是一个可迭代对象，比如 Array，iterable 元素可以不是 promise 如果不是 promise 则会使用 Promise.resolve 转换为 Promise。

从多个数据源获取数据

下面是使用 ajax 从多个不同的接口获取数据的示例，如果所有的数据都获取成功，就可以渲染页面，否则报错。

p = Promise.race([
  fetch('/resource/data1.json')，
  fetch('/resource/data2.json')，
  fetch('/resource/data3.json')，
]).then(([d1, d2, d3]) => {
//render page
}).catch(err => {
//err handler
});

Promise.race

Promise.race 方法是 Promise 的一个静态方法，将多个 promise 实例包装成一个新的 promise 实例，和 Promise.all 不同的是，这多个 promise 实例中的任意一个 promise 被解决或拒绝后，立刻以该 promise 的状态和传递的值返回给其回调函数，方法返回一个 Promise。

语法

Promise.race(iterable) //iterable：一个可迭代对象，比如Array。

处理 ajax 异常状态

下面是使用 ajax 获取数据的示例，第二个 promise 在5s后状态会变为 reject ，如果 fetch 在5s 内获取导数据将会正常执行，否则会触发超时错误。

p = Promise.race([
  fetch('/resource/data.json'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]).then(response => {
  //use data do sth
}).catch(error => {
  //err handler
})

Promise.resolve

Promise.resolve 方法将给定的参数转换为一个 Promise 对象，

语法

Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);

参数是 promise 对象

参数是 promise 对象，则不做操作直接返回这个 promise 对象。

Promise.resolve(Promise.resolve('Hello, world')).then(data => console.log(data));

参数是 thenable 对象

如果参数是一个包含 then 方法的对象，resolve 方法会将这个对象转为 Promise 对象，然后执行这个对象的 then 方法。

Promise.resolve({
  then(resolve, reject) {
    resolve('Hello, world');
  }
}).then(data => console.log(data));//Hello, world

参数不是 thenable 和 promise 对象

如果参数是一个数值，或者是一个非 thenable 或非 promise 的对象，Promise.resolve 方法返回一个状态为 Resolved 的 promise 对象，并把这个参数作为返回值传递给 then 回调函数(如果存在 then 的回调)。

Promise.resolve('Hello, world').then(data => console.log(data)); //Hello, world

Promise.reject

Promise.reject 方法将给定的参数转换为一个 Promise 对象，

语法

Promise.reject(value);
Promise.reject(promise);
Promise.reject(thenable);

具体的使用情况与 Promise.resolve 类似。

参考:

1. Promise
2. Promise对象