【Promise】手写实现方法 手写promise的两种实现方法 1、class实现 2、函数实现 手写promise,首先要确认好promise的状态,主要有三种:pending、filfulled、rejected,其次是定义好filfulled的返回值value跟rejected的返回值reason,然后是resolve跟reject方法实现status改变及返回值更新,最后是then的实现,为promise的回调。
// 注意:对于异步事件使用事件订阅发布实现监听
1、class实现
//实现promise
class _promise {
constructor(excutor) {
var self = this;
this.status = 'pending';
this.value = null;
this.reason = null;
//事件缓存列表
this.onFilfulledFns = []
this.onRejectedFns = []
//resolve
function resolve(value) {
if (self.status === 'pending') {
self.value = value;
self.status = 'filfulled';
//事件发布
self.onFilfulledFns.forEach(fn => fn(value))
}
}
//reject
function reject(reason) {
if (self.status === 'pending') {
self.value = reason;
self.status = 'rejected';
//事件发布
self.onRejectedFns.forEach(fn => fn(reason))
}
}
//执行器
try {
excutor(resolve, reject)
} catch (err) {
this.reject(err)
}
}
//then
then(onFilfulled, onRejected) {
if (this.status === 'pending') {
//事件订阅
this.onFilfulledFns.push(onFilfulled);
this.onRejectedFns.push(onRejected)
} else if (this.status === 'filfulled') {
onFilfulled(this.value)
} else {
onRejected(this.reason)
}
}
}
2、函数实现
/**
*
* @param {*} excutor 执行器
*/
function MyPromise(excutor) {
let self = this;
this.status = 'pending';
this.value = null;
this.reason = null;
//事件缓存
this.fulfilledFns = [];
this.rejectedFns = [];
// 成功响应
function resolve(value) {
if (self.status === 'pending') {
self.value = value;
self.status = 'fulfilled';
//事件发布
self.fulfilledFns.forEach(fn => fn(value))
}
}
// 失败事件
function reject(reason) {
if (self.status === 'pending') {
self.reason = reason;
self.status = 'rejected';
//事件发布
self.rejectedFns.forEach(fn => fn(reason))
}
}
//执行器
try {
excutor(resolve, reject)
} catch (err) {
reject(err)
}
}
//then
MyPromise.prototype.then = function (onFulfilled, onRejected) {
let self = this;
//异步事件订阅
if (self.status === 'pending') {
self.fulfilledFns.push(onFulfilled)
self.rejectedFns.push(onRejected)
} else if (self.status === 'fulfilled') {
onFulfilled(self.value)
} else {
onRejected(self.reason)
}
}
let demo = new MyPromise((resolve, reject) => {
console.log('小伙很认真')
setTimeout(() => {
// 异步执行
resolve(1)
}, 1000);
})
demo.then(data => {
console.log(data,'ll')
})