我自己写了一个promise,但是实现后和ES6的的效果还有差别,麻烦各位帮我看一下是哪里出了问题吗?
照着网上的文章自己实现了一个Promise,这是代码
function myPromise(passedInFunction) {
var self = this;
this.pending = "pending"; // 初始状态
this.fulfilled = "fulfilled"; // 完成态
this.rejected = "rejected" // 失败态
this.status = this.pending; // 初始化初始状态
this.value = null; // 用于存储完成状态下需要传递的值
this.error = null; // 用于存储失败状态下需要传递的值
this.onFulfilledFnArr = []; // 存放完成态后方法的数组
this.onRejectedFnArr = []; // 存放失败态后方法的数组
function resolve(successValue) {
if (self.status == self.pending) { // 如果不是初始状态的话就不能传递值和修改状态
self.value = successValue; // 存储成功状态下的值
self.status = self.fulfilled; // 修改状态为完成态
self.onFulfilledFnArr.forEach(function (fulfilledFn) {
fulfilledFn(self.value);
})
}
}
function reject(errorValue) {
if (self.status == self.pending) {
self.error = errorValue;
self.status = self.rejected;
self.onRejectedFnArr.forEach(function (rejectedFn) {
rejectedFn(self.error);
})
}
}
passedInFunction(resolve, reject);
}
myPromise.prototype.then = function (successCallback, errorCallBack) {
var self = this;
successCallback = typeof (successCallback) == "function" ? successCallback : function (successValue) {};
errorCallBack = typeof (errorCallBack) == "function" ? errorCallBack : function (errorInfo) {};
if (self.status == self.fulfilled) { // 如果当前状态为完成态时
return Promise2 = new myPromise(function (resolve, reject) { // 如果要链式操作的话这部是必须的
setTimeout(function () { // 将successCallback放到下一次事件循环中
try {
var p2Res = successCallback(self.value);// 取的successCallback的返回值
if (p2Res instanceof myPromise) {// 如果返回值也是一个myPromise的实例
p2Res.then(resolve, reject);// 那么就继续判断这个对象的状态并持续下去
}
resolve(p2Res.value);// 如果不是myPromise的实例的话就直接修改档当前状态,结束
} catch (error) {
reject(error);
}
})
})
}
if (self.status == self.rejected){
return Promise2 = new myPromise(function(resolve,reject){
setTimeout(function(){
try {
var p2Res = errorCallBack(self.error);
if(p2Res instanceof myPromise){
p2Res.then(resolve,reject);
}
} catch (error) {
reject(error);
}
})
})
}
// 如果当前状态为pending时,我们就不知道到底是要执行successCallback还是errorCallBack,所以只能将这两个回调函数分别添加到上一个myPromise实例的对应回调函数数组里,供以后状态改变了之后调用
if(self.status == self.pending){
return Promise2 = new myPromise(function(resolve,reject){
setTimeout(function(){
self.onFulfilledFnArr.push(function(value){
try {
var p2Res = successCallback(self.value);
if (p2Res instanceof myPromise) {
p2Res.then(resolve, reject);
}
resolve(p2Res.value);
} catch (error) {
reject(error);
}
})
self.onRejectedFnArr.push(function(value){
try {
var p2Res = errorCallBack(self.error);
if(p2Res instanceof myPromise){
p2Res.then(resolve,reject);
}
} catch (error) {
reject(error);
}
})
})
})
}
}
写完后我自己用了一下:
var pro = new myPromise(function(resolve,reject){
console.log(1);
resolve(2);
});
// console.log(pro);
pro.then(function(value){
console.log(value);
return new myPromise(function(resolve,reject){
console.log(3);
resolve(4);
})
}).then(function(value){
console.log(value);
})
console.log(5);
但是最后执行结果却并没有像ES6Promise那样吧4打印出来。
大佬帮我看一下吧。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论