如果想实现一个Promise 需要从以下几个方面考虑
then
method whose behavior conforms to this specification.then
method.undefined
, a thenable, or a promise).throw
statement.我们在使用 Promise的时候,都是通过 new 关键字调用, 所以借助 ES6 class 实现 Promise的声明
class DDFPromise {
constructor(executor) {
executor(executor);
}
复制代码
我们在使用Promise时,注意到,Promise有三种状态 fulfill/reject/pending
const PENDING_STATUS = "pending";
const FULFILL_STATUS = "fulfill";
const REJECT_STATUS = "reject";
class DDFPromise {
constructor(executor) {
this.status = PENDING_STATUS;
executor(executor);
}
}
new DDFPromise(() => {
console.log("代码执行");
});
复制代码
实现resolve 需要关注两个点
const PENDING_STATUS = "pending";
const FULFILL_STATUS = "fulfill";
const REJECT_STATUS = "reject";
class DDFPromise {
constructor(executor) {
this.status = PENDING_STATUS;
this.value = null;
const resolve = (value) => {
if (this.status === PENDING_STATUS) {
this.status = FULFILL_STATUS;
console.log("resolve被执行", value);
** **this.value = value
}
};
executor(resolve);
}
}
new DDFPromise((resolve) => resolve("resolve传入的参数"))
复制代码
实现resolve 需要关注两个点
const PENDING_STATUS = "pending";
const FULFILL_STATUS = "fulfill";
const REJECT_STATUS = "reject";
class DDFPromise {
constructor(executor) {
this.status = PENDING_STATUS;
this.value = null;
const resolve = (value) => {
if (this.status === PENDING_STATUS) {
this.status = FULFILL_STATUS;
console.log("resolve被执行", value);
this.value = value
}
};
const reject = (reason) => {
if (this.status === PENDING_STATUS) {
this.status = REJECT_STATUS;
this.reason = reason;
}
};
executor(resolve, reject);
}
}
new DDFPromise((resolve, reject) => {
resolve("resolve传入的参数");
reject("reject传入的参数");
})
复制代码
实现then 需要关注 以下几点
const PENDING_STATUS = "pending";
const FULFILL_STATUS = "fulfill";
const REJECT_STATUS = "reject";
class DDFPromise {
constructor(executor) {
this.status = PENDING_STATUS;
this.value = null;
this.reason = null;
const resolve = (value) => {
if (this.status === PENDING_STATUS) {
this.status = FULFILL_STATUS;
this.value = value;
this.onfulfilled(this.value);
}
};
const reject = (reason) => {
if (this.status === PENDING_STATUS) {
this.status = REJECT_STATUS;
this.reason = reason;
this.onrejected(this.reason);
}
};
executor(resolve, reject);
}
then(onfulfilled, onrejected) {
this.onfulfilled = onfulfilled;
this.onrejected = onrejected;
}
}
const ddfPro = new DDFPromise((resolve, reject) => {
resolve("resolve传入的参数");
// reject("reject传入的参数");
});
ddfPro.then(
(res) => {
console.log("fulfilled", res);
},
(err) => {
console.log("reject", err);
}
);
复制代码
上边代码执行时报错 this.onfulfilled is not a function,报错的原因:new Prose(()=>{}) 入参的代码会立刻执行,而执行时this.onrejected,还没有声明,其实我们可以借助 Event Loop 解决此问题
queueMicrotask | setTimeout
const PENDING_STATUS = "pending";
const FULFILL_STATUS = "fulfill";
const REJECT_STATUS = "reject";
class DDFPromise {
constructor(executor) {
this.status = PENDING_STATUS;
this.value = null;
this.reason = null;
const resolve = (value) => {
if (this.status === PENDING_STATUS) {
this.status = FULFILL_STATUS;
queueMicrotask(() => {
this.value = value;
this.onfulfilled(this.value);
});
}
};
const reject = (reason) => {
if (this.status === PENDING_STATUS) {
this.status = REJECT_STATUS;
queueMicrotask(() => {
this.reason = reason;
this.onrejected(this.reason);
});
}
};
executor(resolve, reject);
}
then(onfulfilled, onrejected) {
this.onfulfilled = onfulfilled;
this.onrejected = onrejected;
}
}
const ddfPro = new DDFPromise((resolve, reject) => {
// resolve("resolve传入的参数");
// reject("reject传入的参数");
});
ddfPro.then(
(res) => {
console.log("fulfilled", res);
},
(err) => {
console.log("reject", err);
}
);
复制代码
经过如上步骤,只完成了Promise的基本操作,