JavaScript中对Promise对象的理解

注意单词对应的翻译，有助于理解整个模式

• promise: 承诺

• pending: 待定

• settled: 定了

• resolve(d): （已）解决

• reject(ed): （已）拒绝

• onFulfilled: 已履行（事件）

• onRejected: 已拒绝（事件）

• then: 然后，接下来

• catch: 捕获

• race: 赛跑

• future: 未来（值）

• thenable：可then的（有then属性的）

一.Promise是什么

一套异步操作处理机制， Promise A+ 是规范，jQuery、ES2015、q的promise都是对该规范的一种实现

二.Promise有什么特点

• 更容易控制异步操作的执行顺序

• 可以在一系列异步操作中，灵活地处理错误

• 支持链式调用，好写

• 能够消除回调金字塔，好看

三.Promise有什么用

• 实现串行任务队列

• 实现串行任务管道

• 处理运行时才能确定执行顺序的串行任务

（篇幅限制，具体适用场景以后再展开）

四.Promise类型

内部属性[[PromiseStatus]]/[[PromiseValue]]

[[PromiseStatus]]：pending(待定) | resolved(已解决) | rejected(已拒绝)

后两个统称 settled （定了）， pending 是初始状态，如果 new Promise(func) 后， func中的 resolve 和 reject 都还没有执行，此时 status=pending

[[PromiseValue]]：undefined | resolve/reject的参数 | Promise.resolve/reject的!thenable参数 | onFulfilled/onRejected的返回值

当 then 被调用时，该值会被传给 then 的 onFulfilled 或 onRejected ，如果 resolve 和reject 始终没有执行，那么 then 的 onFulfilled 和 onRejected 也始终不会执行

构造器参数resolve/reject

resolve（解决）

执行 resolve 后，触发 then 的 onFulfilled 回调，并把 resolve 的参数传递给 onFulfilled

reject（拒绝）

执行 reject 后，触发 then | catch 的 onRejected 回调，并把 reject 的参数传递给 onRejected

注意 ：如果紧跟的 then 没有声明 onRejected 回调，则传给下一个 then | catch 的 onRejected ，还没有，接着传…如果走到头都没有，则报错Uncaught (in promise) Error:xxx

特殊的 ：如果 resolve 的参数是Promise对象，且该Promise对象后面没有跟 then ，则该对象的 resolve / reject 会触发外层Promise对象后续的 then 的 onFulfilled/onRejected

五.基本语法

1.创建Promise对象

创建Promise的基本语法如下：

// 创建
var promise = new Promise(function(resolve, reject) {
	if (/*...*/) {
		resolve(data);
	}
	else {
		reject(new Error('error occurs'));
	}
});
// 使用
// then
promise.then(function(future) {
	// ...
}, function(error) {
	// ...
});
// catch
promise.catch(function(error) {
	// ...
});

注意 ： new Promise(func) 时， func 会 立即执行 （不像generator只声明不执行），执行过程中遇到 resolve() 装没看见（P.S.简单理解为装没看见，解释见注释），遇到 reject() 立即抛出错误，对比例子如下：

new Promise(function(resolve, reject) {
	console.log('#1');
	resolve(1);
	console.log('#2');
});
// => #1 #2 不报错（遇到resolve装没看见）
// 其实内部属性[[PromiseStatus]]和[[PromiseValue]]都变了，但没有then提供的onFulfilled回调，看不到效果
new Promise(function(resolve, reject) {
	console.log('#1');
	reject(new Error('reject'));
	console.log('#2');
});
// => #1 #2 报错：Uncaught (in promise) Error: reject(…)
// 因为后面没有then/catch提供的onRejected回调，异常没有被消费掉

P.S. reject 的参数可以是任意类型的，但一般都传入 Error 对象表示错误原因

2.Promise.prototype.then(onFulfilled, onRejected) 然后

给 promise 添加 onFulfilled/onRejected 回调handler，当 promise 的 resolve/reject 执行时触发对应handler

注意 ：用 promise.then 添加回调函数时，如果 promise 已经处于 fulfilled 或 rejected状态，那么相应的方法将会被 立即调用

返回一个Promise对象 （链式调用有戏），可以简单理解为：

1.如果触发了 onFulfilled ，则该对象的[[PromiseValue]]=onFulfilled的返回值，[[PromiseStatus]]=resolved

new Promise(function(resolve, reject) {
    resolve(2);
}).then(function(future) {
    return future * 2;
}, onRejected).then(onFulfilled, onRejected);
// onFulfilled拿到了4

2.如果触发了onRejected，则该对象的[[PromiseValue]]=onRejected的返回值，[[PromiseStatus]]=resolved

特别注意 ：返回对象的状态是 resolved ，而 不是 rejected

new Promise(function(resolve, reject) {
    reject(2);
}).then(null, function(err) {
    return err * 2;
}).then(onFulfilled, onRejected);
// 还是onFulfilled拿到了4，而不是onRejected

P.S.实际上[[PromiseValue]]=undefined, [[PromiseStatus]]=pending，但仍将按照上述状态来执行

3.Promise.prototype.catch(onRejected) 捕获

等价于 then(null, onRejected) ，返回一个Promise对象，可以简单理解为：

1.如果触发了onReject，则返回对象的[[PromiseValue]]=onReject的返回值, [[PromiseStatus]]=resolved

2.如果onReject始终没有触发，则装作没看见catch，直接返回原Promise对象

var p = new Promise(function(resolve, reject) {
	resolve(2);
}).catch(function() {
	console.log('onRejected');
	return false;
});
p.then(onFulfilled, onRejected);
// onFulfilled拿到了2，catch没有任何影响

P.S.实际上[[PromiseValue]]=undefined, [[PromiseStatus]]=pending，但仍将按照上述状态来执行

4.Promise.all(iterable)

返回Promise对象，当 iterable 中所有 promise 都 resolve 后，触发 onFulfilled ，遇到第一个否定 promise 就立即退出，并触发 onRejected

//1.全肯定集合，触发onFulfilled，传入的参数是集合中所有promise的[[PromiseValue]]组成的数组    
Promise.all([getPromise(), getPromise()]).then(onFulfilled, onRejected);

//2.全否定集合，遇到第一个否定promise就退出，触发onRejected，传入的参数是该promise的[[PromiseValue]]
// Promise.all([getPromise(true), getPromise(true)]).then(onFulfilled, onRejected);

// 3.一般集合，同上
// Promise.all([getPromise(true), getPromise()]).then(onFulfilled, onRejected);

P.S.all，要么全都正常完成，要么因错误中断，全都停下来

5.Promise.race(iterable) 赛跑

返回Promise对象，当 iterable 中有任意一个 promise 被 resolve 后就立即退出，并触发 onFulfilled ，遇到否定 promise 就立即退出，并触发 onRejected

// 1.全肯定集合，遇到第一个肯定promise就退出，触发onFulfilled，传入的参数是该promise的[[PromiseValue]]
// Promise.race([getPromise(), getPromise()]).then(onFulfilled, onRejected);
// 2.全否定集合，遇到第一个否定promise就退出，触发onRejected，传入的参数是该promise的[[PromiseValue]]
// Promise.race([getPromise(true), getPromise(true)]).then(onFulfilled, onRejected);
// 3.一般集合，同上
// Promise.race([getPromise(true), getPromise()]).then(onFulfilled, onRejected);

P.S.“赛跑”，不论结果是肯定还是否定，只要最快的

6.Promise.resolve(value) 解决

1.如果 value 是 promise ，则把 promise 中 resolve/reject 的参数传递给对应的 onFulfilled/onRejected

Promise.resolve(getPromise()).then(onFulfilled, onRejected);
// onFulfilled拿到resolve的参数
Promise.resolve(getPromise(true)).then(onFulfilled, onRejected);
// onRejected拿到reject的参数

2.如果 value 是thenable对象（有 then 属性的对象），就会把 obj 包装成Promise对象，该对象的 then 就是 obj.then

Promise.resolve({
	then: function(onFulfilled, onRejected) {
		// onFulfilled(1);
		onRejected(new Error('obj.then err'));
		console.log('obj.then');
	}
}).then(onFulfilled, onRejected);

3.如果 value 是!thenable值，会把该值包装成Promise对象，该对象的[[PromiseValue]]=value, [[PromiseStatus]]=resolved，所以调用then方法时，onFulfilled将会接收到这个值

Promise.resolve(1).then(onFulfilled, onRejected);
// onFulfilled拿到1

7.Promise.reject(reason) 拒绝

会把 reason 包装成Promise对象，该对象的[[PromiseValue]]=reason, [[PromiseStatus]]=rejected，所以调用 then 方法时， onRejected 将会接收到这个值

注意 ：这里没有thenable/!thenable的区别，一视同仁：

// 1.!thenable onRejected将拿到Error对象
Promise.reject(new Error('static reject')).then(onFulfilled, onRejected);
// 2.promise onRejected将拿到被包起来的肯定Promise对象
// 该对象的[[PromiseValue]]=promise, [[PromiseStatus]]=rejected
Promise.reject(getPromise()).then(onFulfilled, onRejected);
// 3.thenable onRejected将拿到{then: xxx}
Promise.reject({
    then: function(onFulfilled, onRejected) {
        console.log('obj.then');
    }
}).then(onFulfilled, onRejected);

完整的测试DEMO：promise实例

六.高级用法

• 配合生成器（ generator ）

• 配合 async/await

• 转载于http://www.tuicool.com/articles/uQ3uEzE，更多详情可以关注