Promise源码深入理解
// promise的第一版实现
function myPromise(constructor) {
let self = this;
self.status = "pending"
//定义状态改变前的初始状态
self.value = undefined;
//定义状态为resolved的时候的状态
self.reason = undefined;
//定义状态为rejected的时候的状态
function resolve(value) {
//两个==="pending"，保证了状态的改变是不可逆的
console.log(222)
if (self.status === "pending") {
self.value = value;
self.status = "resolved";
}
}
function reject(reason) {
//两个==="pending"，保证了状态的改变是不可逆的
if (self.status === "pending") {
self.reason = reason;
self.status = "rejected";
}
}
//捕获构造异常
try {
constructor(resolve, reject);
} catch (e) {
reject(e);
}
}
myPromise.prototype.then = function (onFullfilled, onRejected) {
let self = this;
console.log('78878' + self.status)
switch (self.status) {
case "resolved":
onFullfilled(self.value);
break;
case "rejected":
onRejected(self.reason);
break;
default:
}
}
var p = new myPromise(function (resolve, reject) { resolve(1) });
p.then(function (x) {
console.log(x)
}) //输出1
// mypromise 无法执行异步的resolve
var p = new myPromise(function (resolve, reject) {
setTimeout(function () {
console.log('thisthisthis================' + this)
resolve(1)
}, 1000)
});
p.then(function (x) { console.log(x) }) //无输出
// 2, 基于观察者
function myPromise(constructor) {
let self = this;
self.status = "pending" //定义状态改变前的初始状态
self.value = undefined;//定义状态为resolved的时候的状态
self.reason = undefined;//定义状态为rejected的时候的状态
console.log('55566567676')
self.onFullfilledArray = [];
self.onRejectedArray = [];
function resolve(value) {
console.log(232323)
if (self.status === "pending") {
self.value = value;
self.status = "resolved";
self.onFullfilledArray.forEach(
function (f) {
// self.value
console.log('value==================' + self.value)
f(); //如果状态从pending变为resolved，
//那么就遍历执行里面的异步方法
});
}
}
function reject(reason) {
if (self.status === "pending") {
self.reason = reason;
self.status = "rejected";
self.onRejectedArray.forEach(function (f) {
f(self.reason); //如果状态从pending变为rejected,
//那么就遍历执行里面的异步方法
})
}
}
//捕获构造异常
try {
constructor(resolve, reject);
} catch (e) {
reject(e);
}
}
myPromise.prototype.then = function (onFullfilled, onRejected) {
let self = this;
console.log('status==========' + self.status)
switch (self.status) {
case "pending":
self.onFullfilledArray.push(function () {
onFullfilled(self.value)
});
self.onRejectedArray.push(function () {
onRejected(self.reason)
});
break;
case "resolved":
onFullfilled(self.value);
break;
case "rejected":
onRejected(self.reason);
break; default:
}
}
var p = new myPromise(function (resolve, reject) {
setTimeout(function () {
console.log(this)
resolve(1)
}, 1000)
});
p.then(function (x) { console.log(x) }) //无输出
// 3.v3.0then方法实现链式调用
myPromise.prototype.then = function (onFullfilled, onRejected) {
let self = this;
let promise2;
switch (self.status) {
case "pending":
promise2 = new myPromise(function (resolve, reject) {
self.onFullfilledArray.push(function () {
try {
let temple = onFullfilled(self.value);
resolve(temple)
}
catch (e) {
reject(e) //error catch
}
});
self.onRejectedArray.push(function () {
try {
let temple = onRejected(self.reason);
reject(temple)
} catch (e) {
reject(e)// error catch
}
});
})
break;
case "resolved":
promise2 = new myPromise(function (resolve, reject) {
try {
let temple = onFullfilled(self.value); //将上次一then里面的方法传递进下一个Promise的状态
resolve(temple);
} catch (e) {
reject(e);//error catch
}
})
break;
case "rejected":
promise2 = new myPromise(function (resolve, reject) {
try {
let temple = onRejected(self.reason); //将then里面的方法传递到下一个Promise的状态里
resolve(temple);
} catch (e) {
reject(e);
}
})
break;
default:
}
return promise2;
}
var p = new myPromise(function (resolve, reject) {
setTimeout(function () {
console.log(this)
resolve(1)
}, 1000)
});
p.then(function (x) {
console.log(x)
}) //输出 1 链式调用1 链式调用2
// 4.v4.0 then函数中的onFullfilled和onRejected方法的返回值问题
function resolvePromise(promise, x, resolve, reject) {
if (promise === x) { throw new TypeError("type error") }
let isUsed;
if (x !== null && (typeof x === "object" || typeof x === "function")) {
try {
let then = x.then;
if (typeof then === "function") {
//是一个promise的情况
then.call(x, function (y) {
if (isUsed) return;
isUsed = true;
resolvePromise(promise, y, resolve, reject);
}, function (e) {
if (isUsed) return;
isUsed = true;
reject(e);
})
} else {
//仅仅是一个函数或者是对象
resolve(x)
}
} catch (e) {
if (isUsed) return;
isUsed = true;
reject(e);
}
} else {
//返回的基本类型，直接resolve
resolve(x)
}
}
myPromise.prototype.then = function (onFullfilled, onRejected) {
let self = this;
let promise2;
switch (self.status) {
case "pending":
promise2 = new myPromise(function (resolve, reject) {
self.onFullfilledArray.push(function () {
setTimeout(function () {
try {
let temple = onFullfilled(self.value);
resolvePromise(temple)
} catch (e) {
reject(e) //error catch
}
})
});
self.onRejectedArray.push(function () {
setTimeout(function () {
try {
let temple = onRejected(self.reason); resolvePromise(temple)
} catch (e) {
reject(e)// error catch
}
})
});
})
case "resolved":
promise2 = new myPromise(function (resolve, reject) {
setTimeout(function () {
try {
let temple = onFullfilled(self.value);
//将上次一then里面的方法传递进下一个Promise状态
resolvePromise(temple);
} catch (e) {
reject(e);//error catch
}
})
})
break;
case "rejected":
promise2 = new myPromise(function (resolve, reject) {
setTimeout(function () {
try {
let temple = onRejected(self.reason);
//将then里面的方法传递到下一个Promise的状态里
resolvePromise(temple);
} catch (e) {
reject(e);
}
})
})
break;
default:
}
return promise2;
}
