共计 9541 个字符，预计需要花费 24 分钟才能阅读完成。
循序渐进实现 Promise
应用 JavaScript 循序渐进实现一个简略的 Promise，反对异步和 then 链式调用。
翻译并整顿自 Medium: Implementing a simple Promise in Javascript – by Zhi Sun
前言
在前端面试和日常开发中，常常会接触到 Promise。并且在现如今的很多面试中，也会常常被要求手写 Promise。
接下来，将应用 JavaScript 循序渐进实现一个简略的 Promise，反对异步和 then 链式调用。
剖析 Promise
Promise 对象用于示意一个异步操作的最终实现 (或失败)及其后果值，罕用来实现异步操作。
Promise 状态
Promise 有三种状态：
-
pending
初始状态
-
fulfilled
执行胜利后的状态
-
rejected
执行失败后的状态
Promise 状态只能由 pending 扭转为 fulfilled 或者由 pending 扭转为rejected，Promise 状态扭转的这一过程被称为settled，并且，状态一旦扭转，后续就不会再次被扭转。
Promise 构造函数中的参数
Promise 构造函数接管一个函数参数executor，该函数接管两个参数：
- resolve
- reject
执行 resolve 会将 Promise 状态由 pending 扭转为 fulfilled，并触发then 办法中的胜利回调函数onFulfilled，
执行 reject 会将 Promise 状态由 pending 扭转为 rejected，并触发then 办法中的失败回调函数onRejected。
then 办法中的回调函数参数
then办法接管两个参数：
-
onFulfilled
胜利回调函数，接管一个参数，即
resolve函数中传入的值 -
onRejected
失败回调函数，接管一个参数，即
reject函数中传入的值
如果 Promise 状态变为fulfilled，就会执行胜利回调函数onFulfilled；如果 Promise 状态变为rejected，就会执行失败回调函数onRejected。
实现 Promise
根底 Promise
首先，constructor接管一个函数 executor，该函数又接管两个参数，别离是resolve 和reject函数。
因而，须要在 constructor 中创立 resolve 和reject函数，并传入 executor 函数中。
class MyPromise {constructor(executor) {const resolve = (value) => {};
const reject = (reason) => {};
try {executor(resolve, reject);
} catch (err) {reject(err);
}
}
}其次，Promise 会依据状态，执行对应的回调函数。最开始的状态为 pending，当resolve 时，状态由 pending 变为 fulfilled；当reject 时，状态由 pending 变为rejected。并且，一旦状态变更后，就不会再次变更。
class MyPromise {constructor(executor) {
this.state = 'pending';
const resolve = (value) => {if (this.state === 'pending') {this.state = 'fulfilled';}
};
const reject = (reason) => {if (this.state === 'pending') {this.state = 'rejected';}
};
try {executor(resolve, reject);
} catch (err) {reject(err);
}
}
}Promise 状态变更后，会触发 then 办法中对应的回调函数。如果状态由 pending 变为 fulfilled，则会触发胜利回调函数，如果状态由pending 变为rejected，则会触发失败回调函数。
class MyPromise {constructor(executor) {
this.state = 'pending';
this.value = null;
const resolve = (value) => {if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
}
};
const reject = (reason) => {if (this.state === 'pending') {
this.state = 'rejected';
this.value = reason;
}
};
try {executor(resolve, reject);
} catch (err) {reject(err);
}
}
then(onFulfilled, onRejected) {if (this.state === 'fulfilled') {onFulfilled(this.value);
}
if (this.state === 'rejected') {onRejected(this.value);
}
}
}接下来能够写点测试代码测试一下性能
const p1 = new MyPromise((resolve, reject) => resolve('resolved'));
p1.then((res) => console.log(res), // resolved
(err) => console.log(err)
);
const p2 = new MyPromise((resolve, reject) => reject('rejected'));
p2.then((res) => console.log(res),
(err) => console.log(err) // rejected
);然而，如果用以下代码测试，会发现什么也没有输入。
const p1 = new MyPromise((resolve, reject) => {setTimeout(() => resolve('resolved'), 1000);
});
p1.then((res) => console.log(res),
(err) => console.log(err)
);
const p2 = new MyPromise((resolve, reject) => {setTimeout(() => reject('rejected'), 1000);
});
p2.then((res) => console.log(res),
(err) => console.log(err)
);这是因为在调用 then 办法时，Promise 仍处于 pending 状态。onFulfilled和 onRejected 回调函数都没有被执行。
因而，接下来须要反对异步。
反对异步的 Promise
为了反对异步，须要先保留 onFulfilled 和onRejected回调函数，一旦 Promise 状态变动，立即执行对应的回调函数。
⚠：这里有个细节须要留神，即 onFulfilledCallbacks 和onRejectedCallbacks是数组，因为 Promise 可能会被调用屡次，因而会存在多个回调函数。
class MyPromise {constructor(executor) {
this.state = 'pending';
this.value = null;
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onFulfilledCallbacks.forEach((fn) => fn(value));
}
};
const reject = (value) => {if (this.state === 'pending') {
this.state = 'rejected';
this.value = value;
this.onRejectedCallbacks.forEach((fn) => fn(value));
}
};
try {executor(resolve, reject);
} catch (err) {reject(err);
}
}
then(onFulfilled, onRejected) {if (this.state === 'pending') {this.onFulfilledCallbacks.push(onFulfilled);
this.onRejectedCallbacks.push(onRejected);
}
if (this.state === 'fulfilled') {onFulfilled(this.value);
}
if (this.state === 'rejected') {onRejected(this.value);
}
}
}接下来能够用之前的测试代码测试一下性能
const p1 = new MyPromise((resolve, reject) => {setTimeout(() => resolve('resolved'), 1000);
});
p1.then((res) => console.log(res), // resolved
(err) => console.log(err)
);
const p2 = new MyPromise((resolve, reject) => {setTimeout(() => reject('rejected'), 1000);
});
p2.then((res) => console.log(res),
(err) => console.log(err) // rejected
);然而如果用以下代码测试，会发现报错了。
const p1 = new MyPromise((resolve, reject) => {setTimeout(() => resolve('resolved'), 1000);
});
p1.then((res) => console.log(res),
(err) => console.log(err)
).then((res) => console.log(res),
(err) => console.log(err)
); // Uncaught TypeError: Cannot read property 'then' of undefined这是因为第一个 then 办法并没有返回任何值，然而却又间断调用了 then 办法。
因而，接下来须要实现 then 链式调用。
反对 then 链式调用的 Promise
要想反对 then 链式调用，then办法须要返回一个新的 Promise。
因而，须要革新一下 then 办法，返回一个新的 Promise，等上一个 Promise 的 onFulfilled 或onRejected回调函数执行实现后，再执行新的 Promise 的 resolve 或reject函数。
class MyPromise {then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) => {if (this.state === 'pending') {this.onFulfilledCallbacks.push(() => {
try {const fulfilledFromLastPromise = onFulfilled(this.value);
resolve(fulfilledFromLastPromise);
} catch (err) {reject(err);
}
});
this.onRejectedCallbacks.push(() => {
try {const rejectedFromLastPromise = onRejected(this.value);
reject(rejectedFromLastPromise);
} catch (err) {reject(err);
}
});
}
if (this.state === 'fulfilled') {
try {const fulfilledFromLastPromise = onFulfilled(this.value);
resolve(fulfilledFromLastPromise);
} catch (err) {reject(err);
}
}
if (this.state === 'rejected') {
try {const rejectedFromLastPromise = onRejected(this.value);
reject(rejectedFromLastPromise);
} catch (err) {reject(err);
}
}
});
}
}接下来能够用以下代码测试一下性能
const p1 = new MyPromise((resolve, reject) => {setTimeout(() => resolve('resolved'), 1000);
});
p1.then((res) => {console.log(res); // resolved
return res;
},
(err) => console.log(err)
).then((res) => console.log(res), // resolved
(err) => console.log(err)
);
const p2 = new MyPromise((resolve, reject) => {setTimeout(() => reject('rejected'), 1000);
});
p2.then((res) => console.log(res),
(err) => {console.log(err); // rejected
throw new Error('rejected');
}
).then((res) => console.log(res),
(err) => console.log(err) // Error: rejected
);然而，如果改用以下代码测试，会发现第二个 then 办法中的胜利回调函数并没有按预期输入（‘resolved’），而是输入了上一个 then 办法的 onFulfilled 回调函数中返回的 Promise。
const p1 = new MyPromise((resolve, reject) => {setTimeout(() => resolve('resolved'), 1000);
});
p1.then((res) => {console.log(res); // resolved
return new MyPromise((resolve, reject) => {setTimeout(() => resolve('resolved'), 1000);
})
},
(err) => console.log(err)
).then((res) => console.log(res), // MyPromise {state: "pending"}
(err) => console.log(err)
);这是因为 onFulfilled/onRejected 回调函数执行完之后，只是简略的将 onFulfilled/onRejected 执行完返回的值传入 resolve/reject 函数中执行，并没有思考 onFulfilled/onRejected 执行完会返回一个新的 Promise 这种状况，所以第二次 then 办法的胜利回调函数中间接输入了上一次 then 办法的胜利回调函数中返回的 Promise。因而，接下来须要解决这个问题。
首先，能够将以上测试代码改成另一种写法，不便梳理思路。
const p1 = new MyPromise((resolve, reject) => {setTimeout(() => resolve('resolved'), 1000);
});
const p2 = p1.then((res) => {console.log(res);
const p3 = new MyPromise((resolve, reject) => {setTimeout(() => resolve('resolved'), 1000);
});
return p3;
},
(err) => console.log(err)
);
p2.then((res) => console.log(res),
(err) => console.log(err)
);能够看到，一共有三个 Promise：
-
第一个 Promise
即通过
new结构进去的 p1 -
第二个 Promise
即通过调用
then办法返回的 p2 -
第三个 Promise
即在
p1.then办法的胜利回调函数参数中返回的 p3
当初的问题是，调用 p2 的 then 办法时，p3 还处于 pending 状态。
要想实现 p2.then 办法中的回调函数能正确输入 p3 中 resolve/reject 之后的值，须要先等 p3 状态变动后再将变动后的值传入 p2 中的 resolve/reject 中即可。换句话说，三个 Promise 状态变动的先后顺序应该是 p1 –> p3 –> p2。
class MyPromise {then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) => {if (this.state === 'pending') {this.onFulfilledCallbacks.push(() => {
try {const fulfilledFromLastPromise = onFulfilled(this.value);
if (fulfilledFromLastPromise instanceof MyPromise) {fulfilledFromLastPromise.then(resolve, reject);
} else {resolve(fulfilledFromLastPromise);
}
} catch (err) {reject(err);
}
});
this.onRejectedCallbacks.push(() => {
try {const rejectedFromLastPromise = onRejected(this.value);
if (rejectedFromLastPromise instanceof MyPromise) {rejectedFromLastPromise.then(resolve, reject);
} else {reject(rejectedFromLastPromise);
}
} catch (err) {reject(err);
}
});
}
if (this.state === 'fulfilled') {
try {const fulfilledFromLastPromise = onFulfilled(this.value);
if (fulfilledFromLastPromise instanceof MyPromise) {fulfilledFromLastPromise.then(resolve, reject);
} else {resolve(fulfilledFromLastPromise);
}
} catch (err) {reject(err);
}
}
if (this.state === 'rejected') {
try {const rejectedFromLastPromise = onRejected(this.value);
if (rejectedFromLastPromise instanceof MyPromise) {rejectedFromLastPromise.then(resolve, reject);
} else {reject(rejectedFromLastPromise);
}
} catch (err) {reject(err);
}
}
});
}
}最终版 Promise
最初，一个简略的 Promise 就实现了，反对异步和 then 链式调用。残缺代码如下：
class MyPromise {constructor(executor) {
this.state = 'pending';
this.value = null;
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onFulfilledCallbacks.forEach((fn) => fn(value));
}
};
const reject = (value) => {if (this.state === 'pending') {
this.state = 'rejected';
this.value = value;
this.onRejectedCallbacks.forEach((fn) => fn(value));
}
};
try {executor(resolve, reject);
} catch (err) {reject(err);
}
}
then(onFulfilled, onRejected) {return new Promise((resolve, reject) => {if (this.state === 'pending') {this.onFulfilledCallbacks.push(() => {
try {const fulfilledFromLastPromise = onFulfilled(this.value);
if (fulfilledFromLastPromise instanceof Promise) {fulfilledFromLastPromise.then(resolve, reject);
} else {resolve(fulfilledFromLastPromise);
}
} catch (err) {reject(err);
}
});
this.onRejectedCallbacks.push(() => {
try {const rejectedFromLastPromise = onRejected(this.value);
if (rejectedFromLastPromise instanceof Promise) {rejectedFromLastPromise.then(resolve, reject);
} else {reject(rejectedFromLastPromise);
}
} catch (err) {reject(err);
}
});
}
if (this.state === 'fulfilled') {
try {const fulfilledFromLastPromise = onFulfilled(this.value);
if (fulfilledFromLastPromise instanceof Promise) {fulfilledFromLastPromise.then(resolve, reject);
} else {resolve(fulfilledFromLastPromise);
}
} catch (err) {reject(err);
}
}
if (this.state === 'rejected') {
try {const rejectedFromLastPromise = onRejected(this.value);
if (rejectedFromLastPromise instanceof Promise) {rejectedFromLastPromise.then(resolve, reject);
} else {reject(rejectedFromLastPromise);
}
} catch (err) {reject(err);
}
}
});
}
}
