手写一款符合Promise/A+规范的Promise

14次阅读

共计 15460 个字符，预计需要花费 39 分钟才能阅读完成。

手写一款符合 Promise/A+ 规范的 Promise
长篇预警！有点长，可以选择性观看。如果对 Promise 源码不是很清楚，还是推荐从头看，相信你认真从头看到尾，并且去实际操作了，肯定会有收获的。主要是代码部分有点多，不过好多都是重复的，不必担心
Promise 的一些用法在此不多赘述，本篇主要带领你手写一个 Promise 源码，学完你就会发现：Promise 没有你想象中的那么难
本篇大概分为以下步骤

实现简单的同步 Promise
增加异步功能
增加链式调用 then
增加 catch finally 方法
增加 all race 等方法
实现一个 promise 的延迟对象 defer
最终测试

实现简单的同步 Promise
先大概说一下基本概念：Promise 内部维护着三种状态，即 pending,resolved 和 rejected。初始状态是 pending，状态可以有 pending—>relolved, 或者 pending—>rejected. 不能从 resolve 转换为 rejected 或者从 rejected 转换成 resolved. 即只要 Promise 由 pending 状态转换为其他状态后，状态就不可变更。ok. 知道了这些后，我们开始手撸代码：
注意观看序号 1 2 3 4 5 …

function Promise(executor){
let that = this;
/** 2 定义初始的一些变量 */
that.status = ‘pending’;
that.value = null;
that.reason = null;

/** 3 定义初始的成功和失败函数 */
function resolve(value){
/** 4 判断状态是不是初始状态 pending
* 是就转换状态否则不转换
* 确保状态的变化后的不可变性 */
if(that.status === ‘pending’){
that.status = ‘resolved’;
that.value = value;
}
}
function reject(reason){
/** 5 同上 */
if(that.status === ‘pending’){
that.status = ‘rejected’;
that.reason = reason;
}
}
/**
* 1 Promise 中首先传了一个 executor，它是一个函数
* executor 函数中又传了两个函数，分别是 resolve 和 reject
* 很显然 resolve 是成功回调，reject 是失败的回调
*/
executor(resolve,reject);
}

/** 6 在 Promise 原型上面定义 then 方法
* then 方法上面有两个回调一个是成功后的方法另一个是失败后的方法
* 根据成功或失败的状态去执行相关成功 onFilfulled() 或者失败 onRejected() 的回调方法
*/
Promise.prototype.then = function(onFilfulled,onRejected){
let that = this;
if(that.status === ‘resolved’){
/** 7 如果状态已经变更为 resolved
* 说明 resolve 方法已经被调用
* 那么此时就执行成功的回调函数 onFilfulled
* 并传入参数 that.value
* */
onFilfulled(that.value);
}
if(that.status === ‘rejected’){
/** 8 同上
* 传入参数 that.reason
*/
onRejected(that.reason);
}
}

module.exports = Promise;
通过 require() 引入手撸的 Promise
let Promise = require(‘./myPromise’);

let p1 = ()=>{
return new Promise((resolve,reject)=>{
resolve(‘success.1’);
});
}

p1().then((data)=>{
console.log(data); // 打印 success.1
},(err)=>{
console.log(err);
});
ok. 经调用发现此代码可以实现部分 Promise 的功能，但仅仅是同步下才有效果。那异步呢？别急这就来~：
增加异步功能
注意观看序号 1 2 3 4 5 …

function Promise(executor){
let that = this;
that.status = ‘pending’;
that.value = null;
that.reason = null;
/** 1 因为异步不是立即执行状态不会变更成功或失败的回调函数也不会执行
* 所以先定义好存放成功或失败回调函数的数组
* 以便将成功或失败的回调函数先保存起来
* */
that.onFilFulledCallbacks = [];
that.onRejectedCallbacks = [];

Promise.prototype.then = function(onFilfulled,onRejected){
let that = this;
if(that.status === ‘resolved’){
onFilfulled(that.value);
}
if(that.status === ‘rejected’){
onRejected(that.reason);
}
/** 2 订阅
* 因为是异步状态当时并没有立即变更所以状态还是 pending
* 此时需要把成功或者失败的回调函数存放到对应的数组中
* 等待状态变更时再从数组中拿出来去执行
* 即订阅
* * 存放数组时为了执行时方便需要把回调函数的外层包裹一层空函数
*/
if(that.status === ‘pending’){
that.onFilFulledCallbacks.push(function(){
onFilfulled(that.value);
});
}
if(that.status === ‘pending’){
that.onRejectedCallbacks.push(function(){
onRejected(that.reason);
});
}
}

module.exports = Promise;
代码测试：
let Promise = require(‘./myPromise’);

let p1 = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(function(){
resolve(‘success.1’);
// reject(‘fail.’);
},1500);
});
}

p1().then((data)=>{
console.log(data); // success.1
},(err)=>{
console.log(err);
});
可以看到 1.5s 后执行了 resolve() 并打印了 success.1，至此，我们实现了异步的 Promise. 其实这里的实现异步的思想就是发布订阅.
en～ok. 高能预警????. 接下来就稍稍复杂了因为我们要实现链式调用 then。要实现这个功能那我们就要重写 then 方法，并在 then 方法中重新返回一个 Promise, 只有这样，才可以实现多次调用 then. 而且要新增一个解析返回值是否为 promise 的函数.
稍微捋下逻辑：

如果一个 then 方法返回一个普通值的话，这个值会传递给下一个 then 中作为 resolve 成功的结果
如果一个 then 方法返回一个 promise 的话，会根据返回的 promise 是成功还是失败，决定下一个 then 是成功还是失败

???? 上代码：
增加链式调用 then
注意观看序号 1 2 3 4 5 …

function Promise(executor){
let that = this;
that.status = ‘pending’;
that.value = null;
that.reason = null;
that.onFilFulledCallbacks = [];
that.onRejectedCallbacks = [];

Promise.prototype.then = function(onFilfulled,onRejected){
let that = this;
/** 1 让 promise2 等于一个新的 Promise 并将 promise2 返回 */
let promise2 = new Promise((resolve,reject)=>{
if(that.status === ‘resolved’){
/** 2 因为返回了 promise2
* 并且第 3 步 resolvePromiseRelation 函数中传递了 promise2
* 而目前 promise2 并没有拿到
* 所以加一个定时器异步执行等到 promise2 拿到后
* 再去执行 resolvePromiseRelation() 方法并将 promise2 传递进去 */
setTimeout(()=>{
try{
let promise3 = onFilfulled(that.value);
/** 3 判断新返回值是什么类型的函数
* 并将当前的 promise：promise2 新的返回值：promise3
* 和成功时回调：esolve 失败时回调：reject 作为参数传进去 */
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
}
if(that.status === ‘rejected’){
/** 同 2 */
setTimeout(()=>{
try{
let promise3 = onRejected(that.reason);
/** 同 3 */
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
}
if(that.status === ‘pending’){
that.onFilFulledCallbacks.push(function(){
/** 同 2 */
setTimeout(()=>{
try{
let promise3 = onFilfulled(that.value);
/** 同 3 */
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
});
}
if(that.status === ‘pending’){
that.onRejectedCallbacks.push(function(){
/** 同 2 */
setTimeout(()=>{
try{
let promise3 = onRejected(that.reason);
/** 同 3 */
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
});
}
});
/** 同 1 */
return promise2;
}

module.exports = Promise;
ok. 至此我们已经实现了 Promsie 的异步和链式调用. Promise 中比较复杂的部分我们已经搞定了接下来就是添加一些方法，其实这部分反而没那么复杂了.
catch : catch 方法本质上就是一个 then 方法的变形，只有失败时的回调没有成功时的回调 finally : finally 方法的作用是不管 Promise 对象最后状态如何，都会执行操作. 其实说白了就是在 then 方法的成功和失败的回调函数中都执行该方法就行了.
ok. 老规矩上代码～
增加 catch finally 方法

function Promise(executor){
let that = this;
that.status = ‘pending’;
that.value = null;
that.reason = null;
that.onFilFulledCallbacks = [];
that.onRejectedCallbacks = [];

Promise.prototype.then = function(onFilfulled,onRejected){
/** 2 此处有个坑如果只写 1 不写 2 的话
* 会报一个 TypeError：onRejected is not a function
* 在此处给它一个默认的成功和失败的回调函数就好 */
onFilfulled = typeof onFilfulled === ‘function’?onFilfulled:value=>value;
onRejected = typeof onRejected === ‘function’?onRejected:err=>{throw err};
let that = this;
let promise2 = new Promise((resolve,reject)=>{
if(that.status === ‘resolved’){
setTimeout(()=>{
try{
let promise3 = onFilfulled(that.value);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
}
if(that.status === ‘rejected’){
setTimeout(()=>{
try{
let promise3 = onRejected(that.reason);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
}
if(that.status === ‘pending’){
that.onFilFulledCallbacks.push(function(){
setTimeout(()=>{
try{
let promise3 = onFilfulled(that.value);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
});
}
if(that.status === ‘pending’){
that.onRejectedCallbacks.push(function(){
setTimeout(()=>{
try{
let promise3 = onRejected(that.reason);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
});
}
});
return promise2;
}

/** 1 直接返回 this 的 then 方法
* 因为 catch 只捕获错误所以 resolve 直接为 null
* 返回 reject 就好 */
Promise.prototype.catch = function(errFn){
return this.then(null,errFn);
}

/** 3 finally 实现起来也很简单
* 分别在 resolve 和 reject 中执行 fn 就好
* 最后再把 this 返回出去就好
*/
Promise.prototype.finally = function(fn){
this.then(()=>{
fn();
},()=>{
fn();
});
return this;
}

module.exports = Promise;
增加 all race 等方法

function Promise(executor){
let that = this;
that.status = ‘pending’;
that.value = null;
that.reason = null;
that.onFilFulledCallbacks = [];
that.onRejectedCallbacks = [];

Promise.prototype.then = function(onFilfulled,onRejected){
onFilfulled = typeof onFilfulled === ‘function’?onFilfulled:value=>value;
onRejected = typeof onRejected === ‘function’?onRejected:err=>{throw err};
let that = this;
let promise2 = new Promise((resolve,reject)=>{
if(that.status === ‘resolved’){
setTimeout(()=>{
try{
let promise3 = onFilfulled(that.value);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
}
if(that.status === ‘rejected’){
setTimeout(()=>{
try{
let promise3 = onRejected(that.reason);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
}
if(that.status === ‘pending’){
that.onFilFulledCallbacks.push(function(){
setTimeout(()=>{
try{
let promise3 = onFilfulled(that.value);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
});
}
if(that.status === ‘pending’){
that.onRejectedCallbacks.push(function(){
setTimeout(()=>{
try{
let promise3 = onRejected(that.reason);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
});
}
});
return promise2;
}

Promise.prototype.catch = function(errFn){
return this.then(null,errFn);
}
Promise.prototype.finally = function(fn){
this.then(()=>{
fn();
},()=>{
fn();
});
return this;
}

/** 1 直接在构造函数上增加 all 方法
* 它返回的也是一个 Promise
* 等待参数数组中所有的 promise 都执行完毕后
* 再返回结果
*/
Promise.all = function(values){
return new Promise((resolve,reject)=>{
/** 2 定义一个存放最终结果的数组 result 和一个 index */
let results = [];
let index = 0;
/** 3 定义一个方法 addToArr()
* 让 index 每次执行增加 results 数组元素的函数的时候都 +1
* 当 index === values 的长度的时候说明此时所有 promsie 都执行完毕并放到的数组中
* 然后直接 resolve(results) 就行了
*/
function addToArr(key,value){
index++;
results[key] = value;
/** 6 当满足条件时说明所有的 promise 都执行完毕直接 resolve(results) */
if(index === values.length){
resolve(results);
}
}
/** 4 循环 values 中的每一项 promsie */
for(let i = 0; i < values.length; i++){
let current = values[i];
/** 5 判断每一项 promise 的返回值是不是一个 Promsie
* 是的话就执行该 Promise 的 then 方法拿到返回值并放到数组 results 中
* 是一个普通值的话就直接将该值放到数组 results 中
*/
if(current && current.then && typeof current.then === ‘function’){
current.then((value)=>{
/** 同 5 把返回值放到数组 results 中 */
addToArr(i,value);
},reject);
}else{
/** 同 5 把返回值放到数组 results 中 */
addToArr(i,current);
}
}
});
}

/** race 方法相比较于 all 方法简单很多
* 因为 race 中的 promsie 成功 resolve 一个
* 整个 race 就 resolve */
Promise.race = function(values){
return new Promise((resolve,reject)=>{
/** 同 4 */
for(let i = 0; i < values.length; i++){
let current = values[i];
/** 同 5 */
if(current&&current.then&&typeof current.then === ‘function’){
/** 7 直接执行 then 就好 */
current.then(resolve,reject);
}else{
/** 8 普通值直接 resolve */
resolve(current);
}
}
});
}
module.exports = Promise;
实现一个 promise 的延迟对象 defer
此步是为了测试我们手写的 Promsie 符不符合 Promsie/A+ 规范，如果没有 defer 的话，我们在测试过程中就会报一个 TypeError: adapter.deferred is not a function.
其实写完 defer 后，我们就可以去进行测试我们手写的 Promsie 符不符合 Promsie/A+ 规范了。
即：本篇手写一款符合 Promise/A+ 规范的 Promise 的最终本为：

function Promise(executor){
let that = this;
that.status = ‘pending’;
that.value = null;
that.reason = null;
that.onFilFulledCallbacks = [];
that.onRejectedCallbacks = [];

Promise.prototype.then = function(onFilfulled,onRejected){
onFilfulled = typeof onFilfulled === ‘function’?onFilfulled:value=>value;
onRejected = typeof onRejected === ‘function’?onRejected:err=>{throw err};
let that = this;
let promise2 = new Promise((resolve,reject)=>{
if(that.status === ‘resolved’){
setTimeout(()=>{
try{
let promise3 = onFilfulled(that.value);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
}
if(that.status === ‘rejected’){
setTimeout(()=>{
try{
let promise3 = onRejected(that.reason);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
}
if(that.status === ‘pending’){
that.onFilFulledCallbacks.push(function(){
setTimeout(()=>{
try{
let promise3 = onFilfulled(that.value);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
});
that.onRejectedCallbacks.push(function(){
setTimeout(()=>{
try{
let promise3 = onRejected(that.reason);
resolvePromiseRelation(promise2,promise3,resolve,reject);
}catch(e){
reject(e);
}
},0);
});
}
});
return promise2;
}

Promise.prototype.catch = function(errFn){
return this.then(null,errFn);
}
Promise.prototype.finally = function(fn){
this.then(()=>{
fn();
},()=>{
fn();
});
return this;
}

Promise.all = function(values){
return new Promise((resolve,reject)=>{
let results = [];
let index = 0;
function addToArr(key,value){
index++;
results[key] = value;
if(index === values.length){
resolve(results);
}
}
for(let i = 0; i < values.length; i++){
let current = values[i];
if(current && current.then && typeof current.then === ‘function’){
current.then((value)=>{
addToArr(i,value);
},reject);
}else{
addToArr(i,current);
}
}
});
}

Promise.race = function(values){
return new Promise((resolve,reject)=>{
for(let i = 0; i < values.length; i++){
let current = values[i];
if(current&&current.then&&typeof current.then === ‘function’){
current.then(resolve,reject);
}else{
resolve(current);
}
}
});
}
// 实现一个 promise 的延迟对象 defer
Promise.defer = Promise.deferred = function(){
let dfd = {};
dfd.promise = new Promise((resolve, reject)=>{
dfd.resolve = resolve;
dfd.reject = reject;
});
return dfd;
}
module.exports = Promise;
最终测试

测试当前代码是否符合 Promise/A+ 规范
全局安装 npm i -g promises-aplus-tests
文件所在目录运行以下命令 (例如你的文件名为:MyPrommise.js)
promise-aplus-tests MyPrommise.js
等待
ok. 源码在 github 上，写文章不易，欢迎 star 或 fork，thx～github

正文完