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
剖析 Promise 内部结构,一步一步实现一个完整的,能通过所有 Test case 的 Promise 类
Promise
来源: http://www.jianshu.com/p/fafeb7745cd9