循序渐进实现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); } } }); }}