JavaScript中手写promise
在JavaScript中,Promise
是一个表示异步操作最终完成或失败的对象。它允许你为异步操作的成功结果或失败原因注册处理方法。Promise
对象有以下三种状态:
pending
: 初始状态,既不是成功,也不是失败状态。fulfilled
: 意味着操作成功完成。rejected
: 意味着操作失败。
一个基本的 Promise
可以通过以下方式手写实现:
function MyPromise(executor) {
let self = this;
self.status = 'pending'; // 初始状态为 pending
self.value = null; // 成功时的值
self.reason = null; // 失败时的原因
// 成功态的处理函数集
self.onResolvedCallbacks = [];
// 失败态的处理函数集
self.onRejectedCallbacks = [];
// 成功态的处理函数
function resolve(value) {
if (self.status === 'pending') {
self.status = 'fulfilled';
self.value = value;
// 依次执行成功回调函数
self.onResolvedCallbacks.forEach(function(callback){
callback(self.value);
});
}
}
// 失败态的处理函数
function reject(reason) {
if (self.status === 'pending') {
self.status = 'rejected';
self.reason = reason;
// 依次执行失败回调函数
self.onRejectedCallbacks.forEach(function(callback){
callback(self.reason);
});
}
}
try {
// 执行executor并传入相应的参数
executor(resolve, reject);
} catch (e) {
// 发生异常时执行失败逻辑
reject(e);
}
}
// 实现 then 方法
MyPromise.prototype.then = function(onFulfilled, onRejected) {
let self = this;
if (self.status === 'fulfilled') {
onFulfilled(self.value);
}
if (self.status === 'rejected') {
onRejected(self.reason);
}
if (self.status === 'pending') {
// 如果状态仍然是 pending,我们需要在 resolve 或 reject 被调用时执行对应的处理函数
self.onResolvedCallbacks.push(onFulfilled);
self.onRejectedCallbacks.push(onRejected);
}
};
// 使用手写的 MyPromise
var promise = new MyPromise(function(resolve, reject){
setTimeout(function(){
resolve('成功');
// reject('失败');
}, 1000);
});
promise.then(function(value){
console.log(value); // 成功
}, function(reason){
console.log(reason); // 失败
});
这个手写的 MyPromise
实现了 Promise
的基本行为:
- 通过
new MyPromise(executor)
创建一个新的Promise
实例。 executor
函数在实例创建时立即执行,并接收两个参数resolve
和reject
。resolve
函数用于将Promise
状态从pending
变为fulfilled
,并传入成功值。reject
函数用于将Promise
状态从pending
变为rejected
,并传入失败原因。then
方法用于注册成功态和失败态的处理函数,并返回一个新的Promise
实例。
请注意,这个示例是一个简化版的 Promise
,它没有实现链式调用、错误捕获、状态的不可逆转等高级特性。在实际开发中,建议使用内置的 Promise
对象。
近期评论