按照原先做的运行执行下面的异步任务
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("ok");
}, 1000);
});
const res = p.then(
(value) => {
console.log(value);
},
(reason) => {
console.log(reason);
}
);
console.log(res);
function Promise(executor) {
const self = this;
this.PromiseState = "pending";
this.PromiseResult = null;
this.callbacks = [];
function resolve(data) {
if (self.PromiseState !== "pending") return;
self.PromiseState = "resolved";
self.PromiseResult = data;
self.callbacks.forEach((item) => {
item.onResolved(self.PromiseResult);
});
}
function reject(data) {
if (self.PromiseState !== "pending") return;
self.PromiseState = "rejected";
self.PromiseResult = data;
self.callbacks.forEach((item) => {
item.onRejected(self.PromiseResult);
});
}
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
Promise.prototype.then = function (onResolved, onRejected) {
return new Promise((resolve, reject) => {
if (this.PromiseState === "resolved") {
try {
let result = onResolved(this.PromiseResult);
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
}
if (this.PromiseState === "rejected") {
try {
let result = onRejected(this.PromiseResult);
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
}
if (this.PromiseState === "pending") {
this.callbacks.push({
onResolved,
onRejected,
});
}
});
};
会发现打印出来的 res 状态为 pending,值为 null
此时 then 方法里面走的是 if (this.PromiseState === "pending") 这个判断,等异步开始执行的时候也只是单纯的调用了 onResolved() 或者 onRejected()
所以我们要对 if (this.PromiseState === "pending") 判断进行改进
Promise.prototype.then = function (onResolved, onRejected) {
const self = this;
return new Promise((resolve, reject) => {
if (this.PromiseState === "resolved") {
try {
let result = onResolved(this.PromiseResult);
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
}
if (this.PromiseState === "rejected") {
try {
let result = onRejected(this.PromiseResult);
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
}
if (this.PromiseState === "pending") {
this.callbacks.push({
onResolved: function () {
// 在这里执行回调函数,拿到回调函数的执行结果,然后进行判断,这里是对象调用 onResolved,所以不能用 this
let result = onResolved(self.PromiseResult);
// 然后进行判断
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
},
onRejected: function () {
let result = onRejected(self.PromiseResult);
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
},
});
}
});
};
异步任务抛出异常
Promise.prototype.then = function (onResolved, onRejected) {
const self = this;
return new Promise((resolve, reject) => {
if (this.PromiseState === "resolved") {
try {
let result = onResolved(this.PromiseResult);
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
}
if (this.PromiseState === "rejected") {
try {
let result = onRejected(this.PromiseResult);
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
}
if (this.PromiseState === "pending") {
this.callbacks.push({
onResolved: function () {
try {
// 在这里执行回调函数,拿到回调函数的执行结果,然后进行判断,这里是对象调用 onResolved,所以不能用 this
let result = onResolved(self.PromiseResult);
// 然后进行判断
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
},
onRejected: function () {
try {
let result = onRejected(self.PromiseResult);
if (result instanceof Promise) {
result.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
},
});
}
});
};