Promise对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。
一个Promise有以下几种状态：
- pending: 初始状态，成功或失败状态。
- fulfilled: 意味着操作成功完成。
- rejected: 意味着操作失败。
Promise的一般使用方式如下：
var p = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('Resolved!');
}, 500);
});
p.then(function(msg) {
console.log('Promise has been ' + msg);
}).catch(function(err) {
console.log('Promise has an error!');
});
注：如果你不是很了解Promise及其使用，可以查看一下官方文档Promise
根据这种链式调用方式，我们可以推测一下Promise内部大概是什么结构：
- 有一个变量，用于记录当前Promise对象的状态
- 有一个变量，用于存储当前Promise对象的数据
- 有一个数组，用于存储成功时的回调
- 有一个数组，用于存储失败时的回调
- 有一个then方法，用于传入resolve和reject方法来消费Promise
- 有一个catch方法，用于捕获异常
所以目前为止，Promise的内部构造大致为：
function Promise(executor) {
var self = this;
self.status = 'pending';
self.data = undefined;
self.onReslovedCallback = [];
self.onRejectedCallback = [];
}
Promise.prototype.then = function(onResolved, onRejected) { // todo }
Promise.prototype.catch = function(onRejected) { // todo }
回到之前的调用举例中，我们看到传入的函数中有两个参数，一个为resolve，另一个reject，以我们的使用经验可以了解到，resolve会将结果推送至下一个then中，而reject会将结果推送至下一个catch中。这两个皆为函数，所以我们可以添加一些东西到Promise中：
function Promise(executor) {
var self = this;
self.status = 'pending';
self.data = undefined;
self.onReslovedCallback = [];
self.onRejectedCallback = [];
function resolve(data) { // todo }
function reject(reason) { // todo }
try {
executor(resolve, reject);
}
catch(err) {
reject(err);
}
}
resolve的作用是将Promise对象状态置为resolved，同时将数据传递给各个回调，然后再执行回调方法，所以我们能够写出这个方法：
function Promise(executor) {
// ...
function resolve(data) {
if(self.status === 'pending') {
self.status = 'resolved';
self.data = value;
for(var i=0;i<self.onReslovedCallback.length;i++) {
self.onReslovedCallback[i](value);
}
}
}
// ...
}
同理，我们能够写出reject方法：
function Promise(executor) {
// ...
function reject(reason) {
if(self.status === 'pending') {
self.status = 'rejected';
self.data = reason;
for(var i=0;i<self.onRejectedCallback.length;i++) {
self.onRejectedCallback[i](reason);
}
}
}
// ...
}
对于then方法，我们从调用可以看出，它将消费Promise的方式传入进来。当然，Promise里存在有三种状态，我们需要分别处理：
Promise.prototype.then = function(onResolved, onRejected) {
var self = this;
var promise2;
// 当出现promise.then().then()...这种调用时，我们直接将数据进行返回，这样可以实现穿透
onResolved = typeof onResolved === 'function' ? onResolved : function(v) {
return v;
};
// 跟上面一样，为了实现穿透，直接将数据进行返回
onRejected = typeof onRejected === 'function' ? onRejected : function(r) {
return r;
};
// 当Promise对象状态为resolved时，直接返回一个新的Promise对象，这个对象中，直接调用onResolved方法
if(self.status === 'resolved') {
return promise2 = new Promise(function(resolve, reject) {
try {
var x = onResolved(self.data);
if(x instanceof Promise) {
x.then(resolve, reject);
}
resolve(x);
}
catch(err) {
reject(err);
}
});
}
// 当Promise对象状态为rejected时，直接返回一个新的Promise对象，这个对象中直接调用onRejected方法
if(self.status === 'rejected') {
return promise2 = new Promise(function(resolve, reject) {
try {
var x = onRejected(self.data);
if(x instanceof Promise) {
x.then(resolve, reject);
}
}
catch(err) {
reject(err);
}
});
}
// 当Promise对象为pending时，直接返回一个新的Promise对象，这个对象中需要将onResolved以及onRejected方法存入相应的回调列表中
if(self.status === 'pending') {
return promise2 = new Promise(function(resolve, reject) {
self.onReslovedCallback.push(function(value) {
try {
var x = onResolved(self.data);
if(x instanceof Promise) {
x.then(resolve, reject);
}
}
catch(err) {
reject(err);
}
});
self.onRejectedCallback.push(function(reason) {
try {
var x = onRejected(self.data);
if(x instanceof Promise) {
x.then(resolve, reject);
}
}
catch(err) {
reject(err);
}
});
});
}
}
最后实现一下catch方法，很简单，直接调用then进行处理就可以了：
Promise.prototype.catch = function(onRejected) {
return this.then(null, onRejected);
};
至此，我们实现了一个简单Promise对象，可以尝试去使用一下（我们在node中进行测试，所以需要将其导出module.exports = Promise）：
var Promise = require('./promise');
var p = new Promise(function(resolve, reject) {
setTimeout(function() {
console.log(1);
resolve();
}, 500);
});
p.then(function(resolve, reject) {
console.log(2);
resolve();
});
// 执行结果
// 1
// 2
References
网友评论