ES6学习之Promise对象的理解

一、promise的含义

promise 是异步的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，es6 将其写进了语言标准，统一了用法，原生提供了promise对象。所谓promise，简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说，promise 是一个对象，从它可以获取异步操作的消息。promise 提供统一的 api，各种异步操作都可以用同样的方法进行处理。

promise对象的特点

(1)对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态，pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是promise这个名字的由来“承若”;

(2)一旦状态改变就不会再变，任何时候都可以得到这个结果，promise对象的状态改变，只有两种可能：从pending变为fulfilled，从pending变为rejected。这时就称为resolved(已定型)。如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果，这与事件(event)完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的。

有了promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，promise对象提供统一的接口，使得控制异步操作更加容易。

promise也有一些缺点。首先，无法取消promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

二、用法

创建一个实例：

const promise = new promise(function(resolve,reject){

//some code

if(//异步操作成功){

resolve(value);

}else{

reject(error);

}

});

promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将promise的状态置为fullfiled，reject是将promise的状态置为rejected。

promise 新建后就会立即执行。

let promise = new promise(function(resolve, reject) {

console.log(‘promise’);

resolve();

});

promise.then(function() {

console.log(‘resolved.’);

});

console.log(‘hi!’);

执行结果：上面代码中，promise 新建后立即执行，所以首先输出的是promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。

// promise

// hi!

// resolved

下面是一个用promise对象实现的 ajax 操作的例子。

const getjson = function(url) {

const promise = new promise(function(resolve, reject){

const handler = function() {

if (this.readystate !== 4) {

return;

}

if (this.status === 200) {

resolve(this.response);

} else {

reject(new error(this.statustext));

}

};

const client = new xmlhttprequest();

client.open(“get”, url);

client.onreadystatechange = handler;

client.responsetype = “json”;

client.setrequestheader(“accept”, “application/json”);

client.send();

});

return promise;

};

getjson(“/posts.json”).then(function(json) {

console.log(‘contents: ’ + json);

}, function(error) {

console.error(‘出错了’, error);

});

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

如果调用resolve函数和reject函数时带有参数，那么他们的参数会被传递给回调函数，reject函数的参数通常是error对象的实例，表示抛出的错误，resolve函数的参数除了正常的值以外，还可以是另一个promise实例;

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的回调函数将会立刻执行。

注意，调用resolve或reject并不会终结 promise 的参数函数的执行。

三、promise.prototype.then()

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

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

getjson(“/posts.json”).then(function(json) {

return json.post;

}).then(function(post) {

// …

});

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

四、promise.prototype.catch()

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

getjson(‘/posts.json’).then(function(posts) {

// …

}).catch(function(error) {

// 处理 getjson 和 前一个回调函数运行时发生的错误

console.log(‘发生错误!’, error);

});

上面代码中，getjson方法返回一个 promise 对象，如果该对象状态变为resolved，则会调用then方法指定的回调函数;如果异步操作抛出错误，状态就会变为rejected，就会调用catch方法指定的回调函数，处理这个错误。另外，then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。

一般来说，不要在then方法里面定义 reject 状态的回调函数(即then的第二个参数)，总是使用catch方法。

五、promise.all()

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

const 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，此时第一个被reject的实例的返回值，会传递给p的回调函数。

下面是一个具体的例子。

// 生成一个promise对象的数组

const promises = [2, 3, 5, 7, 11, 13].map(function (id) {

return getjson(‘/post/’ + id + “.json”);

});

promise.all(promises).then(function (posts) {

// …

}).catch(function(reason){

// …

});

上面代码中，promises是包含 6 个 promise 实例的数组，只有这 6 个实例的状态都变成fulfilled，或者其中有一个变为rejected，才会调用promise.all方法后面的回调函数。

下面是另一个例子。

const p1 = new promise((resolve, reject) => {

resolve(‘hello’);

})

.then(result => result)

.catch(e => e);

const p2 = new promise((resolve, reject) => {

throw new error(‘报错了’);

})

.then(result => result)

.catch(e => e);

promise.all([p1, p2])

.then(result => console.log(result))

.catch(e => console.log(e));

// [“hello”, error: 报错了]

上面代码中，p1会resolved，p2首先会rejected，但是p2有自己的catch方法，该方法返回的是一个新的 promise 实例，p2指向的实际上是这个实例。该实例执行完catch方法后，也会变成resolved，导致promise.all()方法参数里面的两个实例都会resolved，因此会调用then方法指定的回调函数，而不会调用catch方法指定的回调函数。

如果p2没有自己的catch方法，就会调用promise.all()的catch方法。

const p1 = new promise((resolve, reject) => {

resolve(‘hello’);

})

.then(result => result);

const p2 = new promise((resolve, reject) => {

throw new error(‘报错了’);

})

.then(result => result);

promise.all([p1, p2])

.then(result => console.log(result))

.catch(e => console.log(e));

// error: 报错了