ES6+ 实现一个简版的 Promise
1. 前言
上一节我们学习了 ES6 Promise的基本用法，并且我们知道 Promise 最早出现在社区，所以ES6 中 Promise 也是遵循一个标准的规范的。这个规范就是 Promise A+ 规范 也就是任何人都可以遵循这个规范实现一个自己的 Promise，由于每个人实现的方式有所差异，Promise A+ 规范 给出了一些要求和兼容方式。
本节我们将根据 Promise A+ 规范 实现一个简版的 Promise API。
2. 实现步骤
上一节我们已经知道了 Promise 是一个类，默认接收一个参数 executor（执行器），并且会立即执行。所以首先需要创建一个 Promise 的类，然后传入一个回调函数并执行它，故有如下的初始代码：
class Promise {
constructor(executor) {
executor();
}
}
Promise 有三个状态：等待（padding）、成功（fulfilled），失败（rejected）。默认是等待状态，等待态可以突变为成功态或失败态，所以我们可以定义三个常量来存放这三个状态
const PENDING = 'PENDING';
const RESOLVED = 'RESOLVED'; // 成功态
const REJECTED = 'REJECTED'; // 失败态
class Promise {
constructor(executor) {
this.status = PENDING; // 默认是等待态
executor();
}
}
这样我们就知道了 Promise 的基本状态，那内部的状态是怎么突变为成功或失败的呢？这里执行器（executor）会提供两个个方法用于改变 Promise 的状态，所以我们需要在初始化时定义 resolve 和 reject 方法：在成功的时候会传入成功的值，在失败的时候会传入失败的原因。并且每个Promise 都会提供 then方法用于链式调用。
class Promise {
constructor(executor) {
this.status = PENDING;
const resolve = (value) => {};
const reject = (reason) => {};
// 执行executor时，传入成功或失败的回调
executor(resolve, reject);
}
then(onfulfilled, onrejected) {
}
}
这时我们就可以开始着手去更改 Promise的状态了，由于默认情况下 Promise 的状态只能从 pending 到 fulfilled 和 rejected 的转化。
class Promise {
constructor(executor) {
this.status = PENDING;
const resolve = (value) => {
// 只有等待态时才能更改状态
if (this.status === PENDING) {
this.status = RESOLVED;
}
};
const reject = (reason) => {
if (this.status === PENDING) {
this.status = REJECTED;
}
};
executor(resolve, reject);
}
...
}
成功和失败都会返回对应的结果，所以我们需要定义成功的值和失败的原因两个全局变量，用于存放返回的结果。
class Promise {
constructor(executor) {
this.status = PENDING;
this.value = undefined;
this.reason = undefined;
const resolve = (value) => {
// 只有等待态时才能更改状态
if (this.status === PENDING) {
this.value = value;
this.status = RESOLVED;
}
};
const reject = (reason) => {
if (this.status === PENDING) {
this.reason = reason;
this.status = REJECTED;
}
};
executor(resolve, reject);
}
...
}
这时我们就已经为执行器提供了两个回调函数了，如果在执行器执行时抛出异常时，我们需要使用 try…catch 来补货一下。由于是抛出异常，所以，需要调用 reject 方法来修改为失败的状态。
try {
executor(resolve, reject);
} catch(e) {
reject(e)
}
我们知道实例在调用 then 方法时会传入两个回调函数 onfulfilled, onrejected 去执行成功或失败的回调，所以根据状态会调用对应的函数来处理。
then(onfulfilled, onrejected) {
if (this.status === RESOLVED) {
onfulfilled(this.value)
}
if (this.status === REJECTED) {
onrejected(this.reason)
}
}
这样我们就完了 Promise 最基本的同步功能，
let promise = new Promise((resolve, reject) => {
resolve('value');
// throw new Error('错误');
// reject('error reason')
// setTimeout(() => {
// resolve('value');
// }, 1000)
})
promise.then((data) => {
console.log('resolve response', data);
}, (err) => {
console.log('reject response', err);
})
用上面的代码对我们写的 Promise 进行验证，通过测试用例可知，我们写的 Promise 只能在同步中运行，当我们使用 setTimeout 异步去返回时，并没有预想的在then的成功回调中打印结果。
对于这种异步行为需要专门处理，如何处理异步的内容呢？我们知道在执行异步任务时 Promise 的状态并没有被改变，也就是并没有执行 resolve 或 reject 方法，但是 then 中的回调已经执行了，这时就需要增加当 Promise 还是等待态的逻辑，在等待态时把回调函数都存放起来，等到执行 resolve 或 reject 再依次执行之前存放的then的回调函数，也就是我们平时用到的发布订阅模式。实现步骤：
- 首先，需要在初始化中增加存放成功的回调函数和存放失败的回调函数；
- 然后，由于是异步执行 resolve 或 reject 所以需要在 then 方法中把回调函数存放起来；
- 最后，当执行 resolve 或 reject 时取出存放的回调函数依次执行。
根据以上的实现步骤可以得到如下的代码：
class Promise {
constructor(executor) {
this.status = PENDING;
this.value = undefined; // 成功的值
this.reason = undefined; // 失败的原因
+ // 存放成功的回调函数
+ this.onResolvedCallbacks = [];
+ // 存放失败的回调函数
+ this.onRejectedCallbacks = [];
let resolve = (value) => {
if (this.status === PENDING) {
this.value = value;
this.status = RESOLVED;
+ // 异步时，存放在成功的回调函数依次执行
+ this.onResolvedCallbacks.forEach(fn => fn())
}
};
let reject = (reason) => {
if (this.status === PENDING) {
this.value = reason;
this.status = REJECTED;
+ // 异步时，存放在失败的回调函数依次执行
+ this.onRejectedCallbacks.forEach(fn => fn())
}
};
try {
executor(resolve, reject);
} catch(e) {
reject(e)
}
}
then(onfulfilled, onrejected) {
if (this.status === RESOLVED) {
onfulfilled(this.value)
}
if (this.status === REJECTED) {
onrejected(this.reason)
}
+ if (this.status === PENDING) {
+ this.onResolvedCallbacks.push(() => {
+ // TODO
+ onfulfilled(this.value);
+ })
+ this.onRejectedCallbacks.push(() => {
+ // TODO
+ onrejected(this.reason);
+ })
+ }
}
}
上面的代码中，在存放回调函数时把 onfulfilled, onrejected 存放在一个函数中执行，这样的好处是可以在前面增加处理问题的逻辑。这样我们就完成了处理异步的 Promise 逻辑。下面是测试用例，可以正常的执行 then 的成功回调函数。
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('100');
}, 1000)
})
promise.then((data) => {
console.log('resolve response:', data); // resolve response: 100
}, (err) => {
console.log('reject response:', err);
})
到这里我们是不是已经基本实现了 Promise 的功能呢？ES6 中的 then 方法支持链式调用，那我们写的可以吗？我们在看下面的一个测试用例：
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('100');
}, 1000)
})
promise.then((data) => {
console.log('resolve response:', data); // resolve response: 100
return 200
}, (err) => {
console.log('reject response:', err);
}).then((data) => {
console.log('data2:', data)
}, null)
// TypeError: Cannot read property 'then' of undefined
然而当我们在执行的时候会报错，then 是 undefined。为什么会这样呢？那我们要知道如何满足链式调用的规范，那就是在完成任务后再返回一个Promise 实例。那如何返回一个 Promise 实例呢？在 Promise A+ 规范的 2.2.7 小节在有详细的描述，再实例化一个 promise2 来存放执行后的结果，并返回 promise2。那么我们就要改造 then 方法了。
class Promise {
...
then(onfulfilled, onrejected) {
let promise2 = new Promise((resolve, reject) => {
if (this.status === RESOLVED) {
const x = onfulfilled(this.value)
resolve(x)
}
if (this.status === REJECTED) {
const x = onrejected(this.reason);
reject(x)
}
if (this.status === PENDING) {
this.onResolvedCallbacks.push(() => {
const x = onfulfilled(this.value)
resolve(x)
})
this.onRejectedCallbacks.push(() => {
const x = onrejected(this.reason);
reject(x)
})
}
})
return promise2
}
}
再使用上面的测试用例，就可以得到正确的结果：
let promise = new Promise((resolve, reject) => {
resolve('100');
})
promise.then((data) => {
console.log('data1:', data); // data1: 100
return 200
}, null).then((data) => {
console.log('data2:', data); // data2: 200
throw new Error('error')
}, null).then(null, () => {
consol.log('程序报错...')
})
上面的测试用例中，当 then 的回调函数抛出异常时需要去捕获错误，传到下一个 then 的失败回调函数中。
class Promise {
...
then(onfulfilled, onrejected) {
let promise2 = new Promise((resolve, reject) => {
if (this.status === RESOLVED) {
try{
const x = onfulfilled(this.value)
resolve(x)
} catch(e) {
reject(e)
}
}
if (this.status === REJECTED) {
try{
const x = onrejected(this.reason);
resolve(x)
} catch(e) {
reject(e)
}
}
if (this.status === PENDING) {
this.onResolvedCallbacks.push(() => {
try{
const x = onfulfilled(this.value)
resolve(x)
} catch(e) {
reject(e)
}
})
this.onRejectedCallbacks.push(() => {
try{
const x = onrejected(this.reason);
resolve(x)
} catch(e) {
reject(e)
}
})
}
})
return promise2
}
}
到这里为止我们就已经实现了一个简版的 Promise，因为Promise是一个规范，很多人都可以实现自己的 Promise 所以 Promise A+ 规范做了很多兼容处理的要求，如果想实现一个完整的 Promise 可以参考 Promise A+ 规范 。
3. 小结
本节主要按照 Promise A+ 规范 部分的要求实现了一个简版的 Promise API 这个 Promise 基本上满足同步异步的链式调用，对基本的异常做了处理。当然 Promise A+ 规范 所规定的细节比较多，剩下的都是对各种异常错误的处理，所以后面我们也没有去实现。另外官网下提供了一个测试用例来验证我们写的 Promise 是否符合 Promise A+ 规范 ，所以可以参考 promises-tests 这个库来完成我们的 Promise 的测试。