Promise对象

Promise的含义

Promise在JavaScript语言早有实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。

所谓Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的API，可供进一步处理。

Promise对象有以下两个特点：

1. 对象的状态不受外界影响。Promise对象代表一个异步操作，有3种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何操作都无法改变这个状态。这也就是“Promise”这个名字的由来，它在英语中是“承诺”的意思，表示其他手段无法改变。

2. 一旦状态改变就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要其中之一发生，状态就凝固了，不会再变，会一直保持这个结果。就算改变已经发生，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同。事件的特点是，如果你错过了它，再去监听是得不到结果的。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。其次，如果不设置回调函数，Promise内部抛出的错误不会反应到外部。再者，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

如果某些事件不断地反复发生，一般来说，使用stream模式是比部署Promise更好的选择。

基本用法

ES6规定，Promise对象是一个构造函数，用来生成Promise实例。

下面的代码创造了一个Promise实例。

jscopied
var promise = new Promise(function (resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */) {
    resolve(value);
  } else {
    reject(error);
  }
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步制作报出的错误作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定Resolved状态和Rejected状态的回调函数。

jscopied
promise.then(function (value) {
  // success
}, function (error) {
  // failure
});

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态改变为Resolved时调用，第二个回调函数是Promise对象的状态改变为Rejected时调用。其中，第二个函数是可选的，不一定提供。这两个函数都接受Promise对象传出的值作为参数。

下面是一个Promise对象的简单例子：

jscopied
function timeout (ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then(value => {
  console.log(value)
});

上面的代码中，timeout方法返回一个Promise实例，表示一段时间之后才会发生的结果。过了指定的时间（ms参数）之后，Promise实例的状态变为Resolved，就会触发then方法绑定的回调函数。

下面是一个异步加载图片的例子：

jscopied
function loadImageAsync (url) {
  return new Promise((resolve, reject) => {
    var image = new Image();

    image.onload = function () {
      resolve(image);
    }

    image.onerror = function () {
      reject(new Error('Could not load image at ' + url));
    }
  });
}

下面是一个用Promise对象实现AJAX操作的例子：

jscopied
var getJSON = function (url) {
  var promise = new Promise((resolve, reject) => {
    var client = new XMLHttpRequest();
    client.open('GET', url);
    client.onreadystatechange = handler;
    client.responseType = 'json';
    client.setRequestHeader('Accept', 'application/json');
    client.send();

    function handler () {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    }
  });

  return promise;
}

getJSON('/posts.json').then(json => {
  console.log(`Contents: ${json}`);
}, error => {
  console.log(`出错了：${error}`);
});

上面的代码中，getJSON是对XMLHttpRequest对象的封装，用于发出一个针对JSON数据的HTTP请求，并返回一个Promise对象。需要注意的是，在getJSON内部，resolve函数和reject函数调用时都带有参数。

如果调用resolve函数和reject函数时带有参数，那么这些参数会被传递给回调函数。reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的值外，还可能是另一个Promise实例，表示异步操作的结果有可能是一个值，也有可能是另一个异步操作，比如像下面这样：

jscopied
var p1 = new Promise(function (resolve, reject) {
  // ...
});

var p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

上面的代码中，p1和p2都是Promise的实例，但是p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作。

注意，此时p1的状态就会传递给p2。也就是说，p1的状态决定了p2的状态。如果p1的状态是Pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是Resolved或Rejected，那么p2的回调函数将会立即执行。

jscopied
var p1 = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('fail')), 3000)
})

var p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(p1), 1000)
})

p2.then(result => console.log(result))
p2.catch(error => console.log(error))
// Error: fail

上面的代码中，p1是一个Promise实例，3秒之后变为Rejected。p2的状态由p1决定，1秒之后，p2调用resolve方法，但是此时p1的状态还未改变，因此p2的状态也不会变。又过了2秒，p1变为Rejected，p2也跟着变为Rejected。

Promise.prototype.then()

Promise实例具有then方法。也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为Promise实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数。

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

jscopied
getJSON('/posts.json').then(json => {
  return json.post;
}).then(post => {
  // ...
});

上面的代码使用then方法依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数传入第二个回调函数。

采用链式then可以指定一组按次序调用的回调函数。这里，前一个回调函数有可能返回的还是一个Promise对象（即有异步操作），而后一个回调函数就会等待该Promise对象的状态发生变化，再被调用。

jscopied
getJSON('/post/1.json').then(post => {
  return getJSON(post.commentURL);
}).then(
  comments => console.log(`Resolved: ${comments}`), 
  err => console.log(`Rejected: ${err}`)
);

上面的代码中，第一个then方法指定的回调函数返回的是另一个Promise对象。这时，第二个then方法指定的回调函数就会等待这个新的Promise对象状态发生变化。

Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

jscopied
getJSON('/post.json').then(posts => {
  // ...
}).catch(err => {
  // 处理前一个回调函数运行时发生的错误
  console.log(`发生错误！${err}`);
});

上面的代码中，getJSON方法返回一个Promise对象，如果该对象的状态改变为Resolved，则会调用then方法指定的回调函数；如果异步操作抛出错误，状态就会变为Rejected，就会调用catch方法指定的回调函数处理这个错误。

jscopied
p.then(val => console.log('fufilled: ', val))
  .catch(err => console.log('rejected: ', err));

// 等同于
p.then(val => console.log('fufilled: ', val))
  .then(null, err => console.log('rejected: ', err));

下面是另一个例子：

jscopied
var promise = new Promise((resolve, rejecte) => {
  throw new Error('test');
});
promise.catch(error => console.log(error));
// Error: test

上面的代码中，Promise抛出一个错误，就被catch方法指定的回调函数所捕获。

如果Promise状态已经变成Resolved，再抛出错误是无效的。

jscopied
var promise = new Promise((resolve, rejecte) => {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(value => console.log(value))
  .catch(error => console.log(error));

// ok

Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

jscopied
getJSON('/post/1.json')
  .then(post => getJSON(post.commentURL))
  .then(comments => {
    // some code
  })
  .catch(error => {
    // 处理前3个Promise产生的错误
  });

上面的代码中，一个有3个Promise对象：一个由getJSON产生，两个由then产生。其中任何一个抛出的错误都会被最后一个catch捕获。

一般来说，不要在then方法中定义Rejected状态的回调函数（即then的第二个参数），而应该使用catch方法。

jscopied
// bad
promise
  .then(data => {
    // success
  }, error => {
    // error
  });

// good
promise
  .then(data => {
    // success
  })
  .catch(error => {
    // error
  });

上面的代码中，第二种写法要好于第一种写法，理由是前者更接近同步的写法（try/catch）。

跟传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。

jscopied
var someAsyncThing = function () {
  return new Promise((resolve, reject) => {
    resolve(x + 2); // 会报错，因为 x 没有声明。
  });
};

someAsyncThing().then(() => {
  console.log('everything is great');
});

上面的代码中，someAsyncThing函数产生的Promise对象会报错，但是由于没有指定catch方法，因而这个错误不会被捕获，也不会传递到外层代码，导致运行后没有任何输出。

jscopied
var promise = new Promise((resolve, reject) => {
  resolve('ok');
  setTimeout(() => throw new Error('test'), 0)
});
promise.then(value => console.log(value));
// ok
// Uncaught Error: test

上面的代码中，Promise指定下一轮“事件循环”再抛出错误，结果由于没有指定try...catch语句，就冒泡到最外层，成了未捕获的错误。因为此时Promise的函数体已经运行结束，所以这个错误是在Promise函数体外抛出的。

Node.js有一个unhandledRejection事件，专门监听未捕获的Rejected错误。

jscopied
process.on('unhandeldRejection', (err, p) => {
  console.log(err.stack)
});

上面的代码中，unhandledRejection事件的监听函数有两个参数，第一个是错误对象，第二个是报错的Promise实例，可用于了解发生错误的环境信息。

需要注意的是，catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。

jscopied
var someAsyncThing = function () {
  return new Promise((resolve, reject) => {
    resolve(x + 2); // 报错。
  })
};

someAsyncThing()
  .catch(error => {
    console.log('oh no', error);
  })
  .then(() => {
    console.log('carry on');
  });

// oh no [ReferenceError: x is not defined]
// carry on

上面的代码运行完catch方法指定的回调函数，会接着运行后面那个then方法指定的回调函数，如果没有报错，则会跳过catch方法。

catch方法中还能再抛出错误。

jscopied
var someAsyncThing = function () {
  return new Promise((resolve, reject) => {
    resolve(x + 2); // 报错。
  })
};

someAsyncThing()
  .then(() => someAsyncThing())
  .catch(err => {
    console.log('oh no', err);
    y + 2; // 报错，y没声明
  })
  .then(() => console.log('carry on'));

// oh no [ReferenceError: x is not defined]

上面的代码中，catch方法抛出一个错误，因为后面没有别的catch方法，导致这个错误不会被捕获，也不会传递到外层。如果改写一下，结果就不一样了：

jscopied
someAsyncThing()
  .then(() => someAsyncThing())
  .catch(err => {
    console.log('oh no', err);
    y + 2;
  })
  .catch(error => {
    console.log('carry on', error);
  });

// oh no [ReferenceError: x is not defined]
// carry on [ReferenceError: y is not defined]

Promise.all()

Promise.all方法用于将多个Promise实例包装成一个新的Promise实例。

jscopied
var p = Promise.all([p1, p2, p3]);

上面的代码中，Promise.all接受一个数组作为参数，p1、p2、p3都是Promise对象的实例；如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。（Promise.all方法的参数不一定是数组，但是必须具有Iterator接口，且返回的每个成员都是Promise实例。）

p的状态由p1、p2、p3决定，分成两种情况：

1. 只有p1、p2、p3的状态都变成Fulfilled，p的状态才会变成Fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

2. 只要p1、p2、p3中有一个被Rejected，p的状态就变成Rejected，此时第一个被Rejected的实例的返回值会传递给p的回调函数。

下面是一个具体的例子：

jscopied
// 生成一个Promise对象的数组
var promises = [2, 3, 5, 7, 11, 13].map(id => getJSON(`/post/${id}.json`));

Promise.all(promises).then(posts => {
  // ...
}).catch(reason => {
  // ...
})

Promise.race()

Promise.race方法同样是将多个Promise实例包装成一个新的Promise实例。

jscopied
var p = Promise.race([p1, p2, p3]);

上面的代码中，只要p1、p2、p3中只要有一个实例率先被改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的回调函数。

Promise.race方法的参数与Promise.all方法一样，如果不是Promise实例，就会先调用Promise.resolve方法，将参数转为Promise实例，再进一步处理。

下面是一个例子，如果指定时间没有获得结果，就将Promise的状态变为Rejected，否则变为Resolved。

jscopied
var p = new Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('request timeout')), 5000);
  })
]);

p.then(res => console.log(res))
p.catch(err => console.log(err))

上面的代码中，如果5秒之内fetch方法无法返回结果，变量p的状态就会被为Rejected，从而触发catch方法指定的回调函数。

Promise.resolve()

有时需要将现有对象转为Promise对象，Promise.resolve方法就起到这个作用。

jscopied
var jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面的代码将jQuery生成的deferred对象转为新的Promise对象。

jscopied
Promise.resolve('foo')
// 等同于
new Promise(resolve => resolve('foo'))

如果Promise.resolve方法的参数不是具有then方法的对象（又称thenable对象），则返回一个新的Promise对象，且其状态为Resolved。

jscopied
var p = Promise.resolve('Hello');

p.then(s => console.log(s));
// Hello

上面的代码生成了一个新的Promise对象的实例p。由于字符串“Hello”不属于异步操作（判断方法是它不是具有then方法的对象），返回Promise实例的状态从一生成就是Resolved，所以回调函数会立即执行。Promise.resolve方法的参数会同时传给回调函数。

Promise.resolve方法允许调用时不带参数。所以，如果希望得到一个Promise对象，比较方便的方法就是直接调用Promise.resolve方法。

jscopied
var p = Promise.resolve();

p.then(function () {
  // ...
});

如果Promise.resolve方法的参数是一个Promise实例，则会被原封不动地返回。

Promise.reject()

Promise.reject(reason)方法也会返回一个新的Promise实例，状态为Rejected。

jscopied
var p = Promise.reject('出错了');
// 等同于
var p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (err) {
  console.log(err)
})
// 出错了

两个有用的附加方法

ES6的Promise API提供的方法不是很多，可以自己部署一些有用的方法。下面部署两个不在ES6中但是很有用的方法。

done()

Promise对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为Promise内部的错误不会冒泡到全局）。为些，我们可以提供一个done方法，总是处于回调链的尾端，保证抛出的任何可能出现的错误。

jscopied
asyncFunc()
  .then(f1)
  .catch(r1)
  .then(f3)
  .done();

其实现代码相当简单：

jscopied
Promise.prototype.done = function (onFulfilled, onRejected) {
  this.then(onFulfilled, onRejected)
    .catch(reason => {
      // 抛出一个全局错误
      setTimeout(() => { throw reason }, 0);
    });
};

由上可见，done方法可以像then方法那样用，提供Fulfilled和Rejected状态的回调函数，也可以不提供任何参数。但不管怎样，done方法都会捕捉到任何可能出现的错误，并向全局抛出。

finally()

finally方法用于指定不管Promise对象最后的状态如何都会执行。它与done方法的最大区别在于，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。

下面是一个例子，服务器使用Promise处理请求，然后使用finally方法关掉服务器。

jscopied
server.listen(0)
  .then(() => {
    // run test
  })
  .finally(server.stop);

它的实现也很简单。

jscopied
Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
}

上面的代码中，不管前面的Promise是Fulfilled还是Rejected，都会执行回调函数callback。

应用

加载图片

我们可以将图片的加载写成一个Promise，一旦加载完成，Promise的状态就发生变化。

jscopied
const preloadImage = function (path) {
  return new Promise((resolve, reject) => {
    var image = new Image();
    image.onload = resolve;
    image.onerror = reject;
    image.src = path;
  });
};

Generator函数与Promise的结合

使用Generator函数管理流程，遇到异步操作时通常返回一个Promise对象。

jscopied
function getFoo () {
  return new Promise((resolve, reject) => {
    resolve('foo');
  });
}

var g = function* () {
  try {
    var foo = yield getFoo();
    console.log(foo);
  } catch (e) {
    console.log(e);
  }
};

function run (generator) {
  var it = generator();

  function go (result) {
    if (result.done) return result.value;

    return result.value.then(value => {
      return go(it.next(value))
    }, error => {
      return go(it.throw(error));
    })
  }

  go(it.next());
}

run(g);

上面的Generator函数g中，有一个异步操作getFoo，它返回的就是一个Promise对象。函数run用来处理这个Promise对象，并调用下一步next方法。

async函数

async函数与Promise、Generator函数一样，用于取代回调函数解决异步操作。它本质上是Generator函数的语法糖。async函数并不属于ES6，而是被列入了ES7，不过Traceur、Babel、regenerator等转码器已经支持这个功能，转码后立刻就能使用。

async函数的详细介绍，请看异步操作和async函数。

以上，摘抄自阮一峰老师的《ES6标准入门》