const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
constructor(executor) {
try{
// 传入的回调函数在实例化时立即执行
executor(this.resolve, this.reject);
} catch (e) {
this.reject(e);
}
}
// 当前状态
status = PENDING;
// 成功之后的值
value = undefined;
// 失败后的原因
reason = undefined;
// 成功回调
// successCallback = undefined;
successCallback = [];
// 失败回调
// failCallback = undefined;
failCallback = [];
resolve = value => {
// 如果状态不是pending,则直接return
if(this.status !== PENDING) return;
// 将状态更改为成功
this.status = FULFILLED;
// 保存成功后的值
this.value = value;
// 成功回调是否存在
// this.successCallback && this.successCallback(this.value);
while(this.successCallback.length) this.successCallback.shift()();
}
reject = reason => {
// 如果状态不是pending,则直接return
if(this.status !== PENDING) return;
// 将状态更改为失败
this.status = REJECTED;
// 保存失败的原因
this.reason = reason;
// 失败回调是否存在
// this.failCallback && this.failCallback(reason);
while(this.failCallback.length) this.failCallback.shift()();
}
then(successCallback, failCallback) {
successCallback = successCallback ? successCallback : value => value;
failCallback = failCallback ? failCallback : reason => { throw reason };
let promise = new MyPromise((resovle, reject) => {
// 判断状态
if(this.status === FULFILLED) {
// 异步是为了等待new运算符运算完毕,返回本次的promise对象。
setTimeout(() => {
try {
let response = successCallback(this.value);
// 判断response的值是普通值还是promise对象
// 如果是普通值,直接调用resovle
// 如果是promise对象,需先查看promise对象返回结果
// 根据结果决定调用resovle还是reject
resovlePromise(promise, response, resovle, reject)
} catch (e) {
reject(e)
}
}, 0)
} else if(this.status === REJECTED) {
// 异步是为了等待new运算符运算完毕,返回本次的promise对象。
setTimeout(() => {
try {
let response = failCallback(this.reason);
// 判断response的值是普通值还是promise对象
// 如果是普通值,直接调用resovle
// 如果是promise对象,需先查看promise对象返回结果
// 根据结果决定调用resovle还是reject
resovlePromise(promise, response, resovle, reject)
} catch (e) {
reject(e)
}
},0)
} else {
this.successCallback.push(() => {
setTimeout(() => {
try {
let response = successCallback(this.value);
// 判断response的值是普通值还是promise对象
// 如果是普通值,直接调用resovle
// 如果是promise对象,需先查看promise对象返回结果
// 根据结果决定调用resovle还是reject
resovlePromise(promise, response, resovle, reject)
} catch (e) {
reject(e)
}
}, 0)
});
this.failCallback.push(() => {
// 异步是为了等待new运算符运算完毕,返回本次的promise对象。
setTimeout(() => {
try {
let response = failCallback(this.reason);
// 判断response的值是普通值还是promise对象
// 如果是普通值,直接调用resovle
// 如果是promise对象,需先查看promise对象返回结果
// 根据结果决定调用resovle还是reject
resovlePromise(promise, response, resovle, reject)
} catch (e) {
reject(e)
}
},0)
});
}
})
// 链式调用then需要返回promise对象
return promise
}
catch(failCallback) {
return this.then(undefined, failCallback)
}
static all(array) {
let result = [];
let index = 0;
return new MyPromise((resolve, reject) => {
function pushItem (i, v) {
result[i] = v;
index++;
if(index === array.length) resolve(result);
}
for(let i = 0; i < array.length; i++) {
if(array[i] instanceof MyPromise) {
array[i].then(value => resolve(pushItem(i, value)), reason => reject(reason))
} else {
pushItem(i, array[i])
}
}
})
}
static resolve (value) {
if(value instanceof MyPromise) return value;
return new MyPromise(resovle => resovle(value))
}
finally (callback) {
return this.then(value => {
return MyPromise.resolve(callback()).then(() => value)
}, reason => {
return MyPromise.resolve(callback()).then(() => {throw reason})
})
}
}
function resovlePromise (promise, response, resolve, reject) {
// 说明本次返回的promise对象就是then本身的promise对象,需要抛出异常。
if(promise === response) {
console.log(123123)
return reject(new TypeError("Chainning cycle detected for promise #<Promise>"))
}
if(response instanceof MyPromise) {
// response是promise对象
response.then(resolve, reject)
} else {
// 普通值
resolve(response)
}
}
module.exports = MyPromise;
原生js封装promise对象
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。