//promise的封装
class myPromise {
constructor(fn) {
if (typeof fn !== 'function') { //判断传输的类型不是函数 报相应的错误
throw TypeError(`myPromise resolver ${fn} is not a function`)
}
this.status = 'pending'; //设置默认状态
this.data = undefined; //设置默认值
this.resolveCBArr = []; // 设置存储成功的回调函数
this.rejectCBArr = []; // 设置存储失败的回调函数
// 函数内部的resolve函数
let resolve = (data) => { //成功的回调
if (this.status == 'pending') {
this.status = 'resolved'
this.data = data;
this.resolveCBArr.forEach(fn => fn()); //遍历resolveArr数组每一位 然后依次执行
}
}
// 函数内部的reject函数
let reject = (data) => { //失败的回调
if (this.status == 'pending') {
this.status = 'rejected'
this.data = data;
this.rejectCBArr.forEach(fn => fn()); //遍历rejectArr数组每一位 然后依次执行
}
}
fn(resolve, reject) //挂载到new myPromise((resolve,reject) => {})
}
//原型then方法的封装
then(resolveFn, rejectFn) {
if (this.status == 'resolved') { //成功的回调的结果
//为了模仿promise对象中 then方法内的方法是异步的 利用setTimeout
setTimeout(() => {
let res = resolveFn(this.data) // 接受返回值的结果是promise 还是 值
if (res instanceof myPromise) { // 判断返回的值是否为promise构造出来的
return res; //如果是 直接返回
} else {
return myPromise.resolve(res) // 如果不是 返回resolve状态的值
}
}, 0)
}
if (this.status == 'rejected') { //失败的回调的结果
//为了模仿promise对象中 then方法内的方法是异步的 利用setTimeout
setTimeout(() => {
let res = rejectFn(this.data) // 接受返回值的结果是promise 还是 值
if (res instanceof myPromise) { // 判断返回的值是否为promise构造出来的
return res; //如果是 直接返回
} else {
return myPromise.resolve(res) // 如果不是 返回resolve状态的值
}
}, 0)
}
if (this.status == 'pending') { //执行异步的回调函数 如 setTimeout
return new myPromise((resolve, reject) => { //首先肯定返回promise对象
//利用立即执行函数的特性 将每一个异步成功的回调插入数组中
this.resolveCBArr.push(((resolveFn) => {
//return出去一个函数,为了将里面的结果映射给 this.resolveCB
return () => {
let res = resolveFn(this.data);// 接受返回值的结果是promise 还是值
if (res instanceof myPromise) { // 判断返回的值是否为promise构造出来的
res.then(resolve, reject) //如果是promise 调用then方法 执行resolve 将状态映射给new myPromise 返回相应的回调
} else {
resolve(res) //如果不是 返回resolve状态的值
}
}
})(resolveFn))
//利用立即执行函数的特性 将每一个异步失败的回调插入数组中
this.rejectCBArr.push(((rejectFn) => {
//return出去一个函数,为了将里面的结果映射给 this.rejectCB
return () => {
let res = rejectFn(this.data);// 接受返回值的结果是promise 还是值
if (res instanceof myPromise) { // 判断返回的值是否为promise构造出来的
res.then(resolve, reject) //如果是promise 调用then方法 执行reject 将状态映射给new myPromise 返回相应的回调
} else {
resolve(res) //如果不是 返回resolve状态的值
}
}
})(rejectFn))
})
}
}
static resolve(data) { //上面的静态方法 myPromise.resolve()
return new myPromise(reslove => reslove(data)) //执行封装好的resolve
}
static reject(data) { //上面的静态方法 myPromise.reject()
return new myPromise((resolve, reject) => reject(data)) //执行封装好的reject
}
static all(dataArr){ //上面的静态方法 myPromise.all()
return new myPromise(resolve => {
resolve(dataArr) //将传来的数组添加到data中
})
}
}
---------------------------------------------------------------------------------------------------------------------
903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
