写了一年的Promise,今天终于是把测试跑通了，其它都不是难点，难点在于resolvePromise，这是所有里面最难的，当然我们抛开这个先不谈，先实现一些基本的特性.
1. Promise 的三个基本属性
Promise有三个基本属性
- value：
Promise成功的值 - reason：
Promise失败的理由 - state：状态，有
pending，fulfilled，rejected状态
所以我们可以添加三个属性值，以及关于State的三个状态的常量：
js
const State = {
pending: 'pending',
fulfilled: 'fulfilled',
rejected: 'rejected',
};
class MyPromise {
value; // 成功的值
reason; // 失败的理由
state = State.pending;
}2. Promise 的构造器
Promise的构造器传入参数是一个函数，并传入resolve和reject函数，用来改变Promise对象的状态，所以我们可以得到如下代码：
js
const State = {
pending: 'pending',
fulfilled: 'fulfilled',
rejected: 'rejected',
};
class MyPromise {
value;
reason;
state = State.pending;
constructor(exector){
exector?.(this.resolve.bind(this), this.reject.bind(this)); // 新增的代码
}
resolve(){} // 新增的代码
reject(){} // 新增的代码
}2. resolve和reject
在Promise中调用这两个函数，分别会将Promise的状态改为fulfilled和rejected，所以加入状态的改变：
js
const State = {
pending: 'pending',
fulfilled: 'fulfilled',
rejected: 'rejected',
};
class MyPromise {
value;
reason;
state = State.pending;
constructor(exector){
exector?.(this.resolve.bind(this), this.reject.bind(this));
}
resolve(value){
this.value = value; // 新增的代码
this.state = State.fulfilled; // 新增的代码
}
reject(reason){
this.reason = reason; // 新增的代码
this.state = State.rejected; // 新增的代码
}
}当然，Promise在状态修改后，就不能再次修改，所以我们加入判断
js
const State = {
pending: 'pending',
fulfilled: 'fulfilled',
rejected: 'rejected',
};
class MyPromise {
value;
reason;
state = State.pending;
constructor(exector){
exector?.(this.resolve.bind(this), this.reject.bind(this));
}
resolve(value){
if (this.state !== State.pending) return; // 新增的代码
this.value = value;
this.state = State.fulfilled;
}
reject(reason){
if (this.state !== State.pending) return; // 新增的代码
this.reason = reason;
this.state = State.rejected;
}
}3. then函数
then函数返回一个新的Promise对象，参数是两个函数，第一个函数是前一个promise对象被Resolve时调用，第二个函数是前一个对象被Reject时调用，所以我们加上一个then方法，并返回一个新的Promise，并且调用它的Resolve和Reject：
js
const State = {
pending: 'pending',
fulfilled: 'fulfilled',
rejected: 'rejected',
};
class MyPromise {
value;
reason;
state = State.pending;
constructor(exector){
exector?.(this.resolve.bind(this), this.reject.bind(this));
}
resolve(value){
if (this.state !== State.pending) return;
this.value = value;
this.state = State.fulfilled;
}
reject(reason){
if (this.state !== State.pending) return;
this.reason = reason;
this.state = State.rejected;
}
// 新增代码
then(onFulfilled, onRejected) {
let onFulfilledFn;
let onRejectedFn;
const nextPromise = new MyPromise((resolve, reject) => {
onFulfilledFn = function () {
const result = onFulfilled(this.value)
resolve(result);
};
onRejectedFn = function () {
const result = onRejected(this.reason);
resolve(result);
};
});
onFulfilledFn = onFulfilledFn.bind(this);
onRejectedFn = onRejectedFn.bind(this);
if (this.state === State.fulfilled) {
onFulfilledFn();
} else if (this.state === State.rejected) {
onRejectedFn();
}
return nextPromise;
}
}promise对象被resolve或者reject的时候，then函数不是立即执行的，也就是说是异步的，所以，我们需要在回调外面套上queueMircrotask：
javascript
... 省略
then(onFulfilled, onRejected) {
let onFulfilledFn;
let onRejectedFn;
const nextPromise = new MyPromise((resolve, reject) => {
onFulfilledFn = function () {
queueMicrotask(()=>{
const result = onFulfilled(this.value)
resolve(result);
});
};
onRejectedFn = function () {
queueMircotask(()=>{
const result = onRejected(this.reason);
resolve(result);
})
};
});
onFulfilledFn = onFulfilledFn.bind(this);
onRejectedFn = onRejectedFn.bind(this);
if (this.state === State.fulfilled) {
onFulfilledFn();
} else if (this.state === State.rejected) {
onRejectedFn();
}
return nextPromise;
}
... 省略但是此时我们执行这个例子
js
new MyPromise((resolve)=>{ setTimeout(()=>{ resolve(1) }) })
.then((res)=>{console.log(res)})你会发现没有任何输出
这是因为刚才的then只能同步执行： 
所以我们需要用数组来保存订阅，并在状态发生变更的时候执行数组中的函数：
js
...省略
class MyPromise {
...省略
onFulfilledFnArray = [];
onRejectedFnArray = []; // 为了可以 let a = Promise; a.then(); a.then()}
...省略
}
...省略then变更为：
ini
...省略
then(onFulfilled, onRejected) {
let onFulfilledFn;
let onRejectedFn;
const nextPromise = new MyPromise((resolve, reject) => {
onFulfilledFn = function () {
queueMicrotask(()=>{
const result = onFulfilled(this.value)
resolve(result);
});
};
onRejectedFn = function () {
queueMircotask(()=>{
const result = onRejected(this.reason);
resolve(result);
})
};
});
onFulfilledFn = onFulfilledFn.bind(this);
onRejectedFn = onRejectedFn.bind(this);
if (this.state === State.fulfilled) {
onFulfilledFn();
} else if (this.state === State.rejected) {
onRejectedFn();
} else {
// 新增代码
this.onFulfilledFnArray.push(onFulfilledFn);
this.onRejectedFnArray.push(onRejectedFn);
}
return nextPromise;
}
...省略修改一下resolve和reject：
js
...省略
class MyPromise {
...省略
resolve(value) {
if (this.state !== State.pending) return;
this.value = value;
this.state = State.fulfilled;
// 新增代码
while (this.onFulfilledFnArray.length > 0) {
this.onFulfilledFnArray.shift()(); // 不是立即执行
}
}
reject(reason) {
if (this.state !== State.pending) return;
this.reason = reason;
this.state = State.rejected;
// 新增代码
while (this.onRejectedFnArray.length > 0) {
this.onRejectedFnArray.shift()(); // 不是立即执行
}
}
...省略
}
...省略给出当前的完整代码：
js
const State = {
pending: 'pending',
fulfilled: 'fulfilled',
rejected: 'rejected',
};
class MyPromise {
value;
reason;
onFulfilledFnArray = [];
onRejectedFnArray = [];
state = State.pending;
constructor(exector){
exector?.(this.resolve.bind(this), this.reject.bind(this));
}
resolve(value) {
if (this.state !== State.pending) return;
this.value = value;
this.state = State.fulfilled;
// 新增代码
while (this.onFulfilledFnArray.length > 0) {
this.onFulfilledFnArray.shift()(); // 不是立即执行
}
}
reject(reason) {
if (this.state !== State.pending) return;
this.reason = reason;
this.state = State.rejected;
// 新增代码
while (this.onRejectedFnArray.length > 0) {
this.onRejectedFnArray.shift()(); // 不是立即执行
}
}
then(onFulfilled, onRejected) {
let onFulfilledFn;
let onRejectedFn;
const nextPromise = new MyPromise((resolve, reject) => {
onFulfilledFn = function () {
queueMicrotask(()=>{
const result = onFulfilled(this.value)
resolve(result);
});
};
onRejectedFn = function () {
queueMircotask(()=>{
const result = onRejected(this.reason);
resolve(result);
})
};
});
onFulfilledFn = onFulfilledFn.bind(this);
onRejectedFn = onRejectedFn.bind(this);
if (this.state === State.fulfilled) {
onFulfilledFn();
} else if (this.state === State.rejected) {
onRejectedFn();
} else {
// 新增代码
this.onFulfilledFnArray.push(onFulfilledFn);
this.onRejectedFnArray.push(onRejectedFn);
}
return nextPromise;
}
}可以发现成功输出1
resolve传递值的规则
resolve不能传递同一个Promise对象，否则会报错 这种情况一般发生在异步代码中：
javascript
const promise = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve(promise)
})
})Promise - JavaScript | MDN (mozilla.org)
所以我们需要写一个resolvePromise的函数，来过滤掉特殊情况
js
resolvePromise(value) {
if (value === this) {
this.reject(
new TypeError(
'Circular reference detected: promise and x are the same object',
),
);
return false;
}
}thenable对象 当遇到thenable对象时，会调用thenable对象的then，并将resolve的值作为promise的最终状态。
js
resolvePromise(value) {
let called = false;
if (value === this) {
// 省略
} else if (value instanceof MyPromise) {
try {
value.then(
x => {
if (called) return;
called = true;
this.resolve(x);
},
y => {
if (called) return;
called = true;
this.reject(y);
},
);
return false;
} catch (e) {
if (called) return;
this.reject(e);
return false;
}
} else if (value && typeof value === 'object') {
try {
const thenable = Reflect.get(value, 'then');
if (typeof thenable === 'function') {
try {
thenable.call(
value,
x => {
if (called) return;
called = true;
this.resolve(x);
},
y => {
if (called) return;
called = true;
this.reject(y);
},
);
return false;
} catch (e) {
if (called) return;
this.reject(e);
return false;
}
}
} catch (e) {
if (called) return;
this.reject(e);
return false;
}
} else if (value && typeof value === 'function') {
try {
if (Reflect.has(value, 'then')) {
return this.resolvePromise(Reflect.get(value, 'then'));
}
if (value) {
try {
value.call(
value,
x => {
if (called) return;
called = true;
this.resolve(x);
},
y => {
if (called) return;
called = true;
this.reject(y);
},
);
return false;
} catch (e) {
if (called) return;
this.reject(e);
return false;
}
}
} catch (e) {
if (called) return;
this.reject(e);
return false;
}
}
return true;
}最后修改一下resolve函数：
kotlin
resolve(value) {
if (this.state !== State.pending) return;
if (!this.resolvePromise(value)) return; // 特殊对象，特殊解析
this.value = value;
this.state = State.fulfilled;
while (this.onFulfilledFnArray.length > 0) {
this.onFulfilledFnArray.shift()(); // 不是立即执行
}
}。。。还没想好怎么写，正在🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
先给出完整代码：
js
const State = {
pending: 'pending',
fulfilled: 'fulfilled',
rejected: 'rejected',
};
class MyPromise {
value; // 成功的值
reason; // 失败的理由
state = State.pending;
onFulfilledFnArray = [];
onRejectedFnArray = []; // 为了可以 let a = Promise; a.then(); a.then()
constructor(exector) {
exector?.(this.resolve.bind(this), this.reject.bind(this));
}
static resolve(value) {
return new MyPromise(resolve => {
resolve(value);
});
}
static reject(value) {
return new MyPromise((resolve, reject) => {
reject(value);
});
}
resolvePromise(value) {
let called = false;
if (value === this) {
this.reject(
new TypeError(
'Circular reference detected: promise and x are the same object',
),
);
return false;
} else if (value instanceof MyPromise) {
try {
value.then(
x => {
if (called) return;
called = true;
this.resolve(x);
},
y => {
if (called) return;
called = true;
this.reject(y);
},
);
return false;
} catch (e) {
if (called) return;
this.reject(e);
return false;
}
} else if (value && typeof value === 'object') {
try {
const thenable = Reflect.get(value, 'then');
if (typeof thenable === 'function') {
try {
thenable.call(
value,
x => {
if (called) return;
called = true;
this.resolve(x);
},
y => {
if (called) return;
called = true;
this.reject(y);
},
);
return false;
} catch (e) {
if (called) return;
this.reject(e);
return false;
}
}
} catch (e) {
if (called) return;
this.reject(e);
return false;
}
} else if (value && typeof value === 'function') {
try {
if (Reflect.has(value, 'then')) {
return this.resolvePromise(Reflect.get(value, 'then'));
}
if (value) {
try {
value.call(
value,
x => {
if (called) return;
called = true;
this.resolve(x);
},
y => {
if (called) return;
called = true;
this.reject(y);
},
);
return false;
} catch (e) {
if (called) return;
this.reject(e);
return false;
}
}
} catch (e) {
if (called) return;
this.reject(e);
return false;
}
}
return true;
}
resolve(value) {
if (this.state !== State.pending) return;
if (!this.resolvePromise(value)) return;
this.value = value;
this.state = State.fulfilled;
while (this.onFulfilledFnArray.length > 0) {
this.onFulfilledFnArray.shift()(); // 不是立即执行
}
}
reject(reason) {
if (this.state !== State.pending) return;
this.reason = reason;
this.state = State.rejected;
while (this.onRejectedFnArray.length > 0) {
this.onRejectedFnArray.shift()(); // 不是立即执行
}
}
catch(onFulfilled) {
return this.then(undefined, onFulfilled);
}
then(onFulfilled, onRejected) {
let onFulfilledFn;
let onRejectedFn;
const nextPromise = new MyPromise((resolve, reject) => {
onFulfilledFn = function () {
queueMicrotask(() => {
try {
if (typeof onFulfilled === 'function') {
const result = onFulfilled(this.value);
resolve(result);
} else {
resolve(this.value);
}
} catch (e) {
reject(e);
}
});
};
onRejectedFn = function () {
queueMicrotask(() => {
try {
if (onRejected) {
if (typeof onRejected === 'function') {
const result = onRejected(this.reason);
resolve(result);
} else {
reject(this.reason);
}
} else {
reject(this.reason);
}
} catch (e) {
reject(e);
}
});
};
});
onFulfilledFn = onFulfilledFn.bind(this);
onRejectedFn = onRejectedFn.bind(this);
if (this.state === State.fulfilled) {
onFulfilledFn();
} else if (this.state === State.rejected) {
onRejectedFn();
} else {
this.onFulfilledFnArray.push(onFulfilledFn);
this.onRejectedFnArray.push(onRejectedFn);
}
return nextPromise;
}
}