这篇手写 Promise 你一定要康康

更新日期: 2022-06-13阅读: 1k标签: Promise

最近重温了一下 Q/Promise的设计讲解,结合自己的理解和一些小优化,决定也来写一篇手写 Promise 的文章

基础版本

我们先以观察者模式作为基石来搭建一个基础版本,实现的功能如下:

  1. 构造函数接受一个函数 exector 作为参数,该函数的第一个参数是 resolve,作用是把 Promise 对象的状态变为“成功”。
  2. 原型方法 then 是用来注册一个当状态变为成功的回调函数,当回调触发时,参数是 resolve 时的决议值。
function Promise(exector) {
 this.pending = [];
 this.value = undefined;
 const resolve = value => {
   if (this.pending) {
     this.value = value;
     for (const onFulfilled of this.pending) {
       // 通知观察者。
       onFulfilled(this.value);
     }
     this.pending = undefined;
   }
 };
 exector(resolve);
}
Promise.prototype.then = function (onFulfilled) {
 if (this.pending) {
   // 还没决议,先注册观察者。
   this.pending.push(onFulfilled);
 } else {
   // 已决议,直接通知。
   onFulfilled(this.value);
 }
};
// 测试一下。
const p = new Promise(resolve => {
 setTimeout(() => resolve(666), 100);
})
p.then(res => console.log('res: %s', res));
// 输出:
// res: 666

代码很简单,应该不用过多解释,上面的完整代码在这里:p0.js

这个基础版本有个明显的问题:then  不能进行链式调用,接着就来优化一下。

then 链式调用

then 的链式调用会返回一个新的 Promise,并且 then 中回调的返回值会使这个新的 Promise 决议为“成功”状态。

Promise.prototype.then = function (onFulfilled) {
 // “当前”Promise,对于返回的新 Promise 而言,也是“前一个”Promise。
 const prev = this;
 const promise = new Promise(resolve => {
   // 包装 onFulfilled,使其可以“传播”决议;
   // “前一个” Promise 决议后,决议返回的这个新 Promise。
   const onSpreadFulfilled = function (value) {
     resolve(onFulfilled(value));
   };
   if (prev.pending) {
     prev.pending.push(onSpreadFulfilled);
   } else {
     onSpreadFulfilled(prev.value);
   }
 });
 return promise;
};
// 测试一下。
const p = new Promise(resolve => {
 setTimeout(() => resolve(666), 100);
});
p.then(res => {
 console.log('res1: %s', res);
 return res + 1;
).then(res => {
 console.log('res2: %s', res);
);

// 输出:
// res1: 666
// res2: 667

实现链式调用的关键是如何决议返回的新 Promise?这里我对变量做了一些有含义的命名,方便理解:

  1. prev 是调用 then 时“当前”的 Promise,对于返回的新 Promise 而言,可以看做是“前一个”Promise。
  2. 包装 onFulfilled——执行完当前注册的 onFulfilled 后,用其返回值来决议返回的那个新的 Promise。这是个关键步骤,为体现传播的动作,将其命名为 onSpreadFulfilled。
  3. 将 onSpreadFulfilled 作为成功的回调注册到 prev 上。

上面的完整代码在这里:p1.js

现在又有个新问题,如果 resolve 的 value 是个 Promise,或者 onfulfilled 函数返回的结果是个 Promise,那么链式传播的决议值不应该是这个 Promise 本身,而是这个 Promise 的决议值才对,也就是要支持 Promise 的状态传递。

状态传递

在实现状态传递之前,我们先来康康如何确定一个值是不是 Promise。我们可以用原型继承来判断:

return value instanceof Promise;

这样的缺点是兼容性较差,你无法强制使用者的运行环境上下文中只会用一种 Promise 的库,或者在不同的运行上下文中传递 Promise 实例。所以这里我们使用 鸭子类型 来判断 Promise,重点关注对象的行为,将 Promise 看作是一个 thenable 对象。

function isPromise(value) {
 // 如果这个对象上可以调用 then 方法,就认为它是一个“Promise”了。
 return value && typeof value.then === 'function';
}

接下来就来实现状态传递了,实现的思路就是基于鸭子类型和“通知转移”。我们先定义一个函数:

function wrapToThenable(value) {
 if (isPromise(value)) {
   return value;
 } else {
   return {
     then: function (onFulfilled) {
       return wrapToThenable(onFulfilled(value));
     }
   };
 }
}

顾名思义,这个函数的作用是用来把一个值包装为 thenable 对象:如果 value 是 Promise 则直接返回;如果不是就包装并返回一个有 then 方法的对象,也就是 thenable 对象。这个 thenable 对象的作用是啥呢?接着看这里:

function Promise(exector) {
 this.pending = [];
 this.value = undefined;
 const resolve = value => {
   if (this.pending) {
     // 包装为 thenable。
     this.value = wrapToThenable(value);
     for (const onFulfilled of this.pending) {
       // 通知时改为调用 thenable 上的 then。
       this.value.then(onFulfilled);
     }
     this.pending = undefined;
   }
 };
 exector(resolve);
}

resolve 决议时,根据 value 的类型不同,有两种处理情况:

  1. 如果 value 是普通值,经过 wrapToThenable 会包装为 thenable 对象,通知时调用 then 方法相当于直接调用 onFulfilled。
  2. 如果 value 是 Promise,则把 onFulfilled 注册到 value 上;等到 value 决议时,就会调用 onFulfilled。还记得链式调用时的 onSpreadFulfilled 吗?这里就是“通知转移”了,把通知下一个 Promise 的责任转移到了 value 身上。

当然 then 也要做一点修改:

Promise.prototype.then = function (onFulfilled) {
 const prev = this;
 const promise = new Promise(resolve => {
   const onSpreadFulfilled = function (value) {
     resolve(onFulfilled(value));
   };
   if (prev.pending) {
     prev.pending.push(onSpreadFulfilled);
   } else {
     // 这里也要改为调用 then。
     prev.value.then(onSpreadFulfilled);
   }
 });
 return promise;
};
// 测试一下。
const p = new Promise(resolve => {
 setTimeout(() => resolve(666), 100);
});
p.then(res => {
 console.log('res1: %s', res);
 return new Promise(resolve => {
   setTimeout(() => resolve(777), 100);
 });
}).then(res => {
 console.log('res2: %s', res);
});
// 输出:
// res1: 666
// res2: 777

这里来总结一下状态传递的设计思路。包装为 thenable 对象非常关键,作用是保持了与 Promise 一致的行为,也就是接口一致。这样在 resolve 时我们不用特定去判断这个值是不是 Promise,而可以用统一的处理方式来通知观察者;并且也顺便完成了“通知转移”,如果 value 还没有决议,则 then 会注册为回调,如果已决议则 then 会立即执行。

上面的完整代码在这里:p2.js。接下来,我们来完善一下 reject。

失败状态

当 Promise 决议失败时,then 方法里面将只执行第二个参数 onRejected 对应的回调。首先我们需要另一个包装函数:

function wrapToRejected(value) {
 return {
   then: function (_, onRejected) {
     return wrapToThenable(onRejected(value));
   }
 };
}

这个函数的作用是一旦发生 reject(value) 时,我们把 value 变为另一种 thenable 对象,这个对象在执行 then 时只会调用 onRejected。

然后改变一下构造函数:

function Promise(exector) {
 // pending 变为一个二维数组,里面存放的元素是 [onFulfilled, onRejected]。
 this.pending = [];
 this.value = undefined;
 const resolve = value => {
   if (this.pending) {
     this.value = wrapToThenable(value);
     for (const handlers of this.pending) {
       this.value.then.apply(this.value, handlers);
     }
     this.pending = undefined;
   }
 };
 const reject = value => {
   resolve(wrapToRejected(value));
 };
 exector(resolve, reject);
}

现在有一个比较大的变化:this.pending 变为了二维数组。这样 this.value.then.apply 在执行时会有三种情况:

  1. this.value 是成功决议转换来的 thenable 对象,还记得 wrapToThenable 吗?then 被执行时只会调用 onFulfilled。
  2. this.value 是失败决议转换来的 thenable 对象,then 被执行时只会调用 onRejected。
  3. this.value 是一个 Promise,决议会转移到这个 Promise 上。

同样 then 方法也要做一些修改:

Promise.prototype.then = function (onFulfilled, onRejected) {
 const prev = this;
 // 注意这里给了 onFulfilled、onRejected 默认值。
 onFulfilled =
   onFulfilled ||
   function (value) {
     return value;
   };
 onRejected =
   onRejected ||
   function (value) {
     return wrapToRejected(value);
   };
 const promise = new Promise(resolve => {
   const onSpreadFulfilled = function (value) {
     resolve(onFulfilled(value));
   };
   const onSpreadRejected = function (value) {
     resolve(onRejected(value));
   };
   if (prev.pending) {
     prev.pending.push([onSpreadFulfilled, onSpreadRejected]);
   } else {
     prev.value.then(onSpreadFulfilled, onSpreadRejected);
   }
 });
 return promise;
};
// 测试一下。
const p = new Promise((resolve, reject) => {
 setTimeout(() => reject(666), 100);
});
p.then(undefined, err => {
 console.log('err1: %s', err);
 return 1;
}).then(res => {
 console.log('res1: %s', res);
});
// 输出:
// err1: 666
// res1: 1

我们要特别注意一下增加了 onFulfilled、onRejected 的默认值。在实际使用 then 时,可能只会专注处理成功或者失败的回调,但是我们又需要另外一种状态要继续传播下去。这里可能有点不好理解,可以代入数据模拟一下。上面的完整代码在这里:p3.js

又到了思考总结时间,thenable 这个接口是关键所在。通过两个包装对象,分别处理成功和失败的状态,在通知观察者时可以保持统一的逻辑,这个设计是不是感觉很妙呢?

接下来我们要处理一下调用时会产生异常的问题。

异常处理

我们先思考一下会有哪些地方会产生异常?第一个是构造函数里面 exector 执行的时候:

function Promise(exector) {
 this.pending = [];
 this.value = undefined;
 const resolve = value => {
   // ...
 };
 const reject = value => {
   resolve(wrapToRejected(value));
 };
 try {
   exector(resolve, reject);
 } catch (e) {
   // 如果有异常产生,状态变为“失败”。
   reject(e);
 }
}

然后是onFulfilled 和 onRejected 执行的时候。当在以上两个方法里产生异常时,状态要变为失败,并且需要把异常传播下去。then 的改动如下:

Promise.prototype.then = function (onFulfilled, onRejected) {
 // ...
 // 产生异常的时候包装一下。
 const errHandler = returnWhenError(err => wrapToRejected(err));
 onFulfilled = errHandler(onFulfilled);
 onRejected = errHandler(onRejected);
 const promise = new Promise(resolve => {
   const onSpreadFulfilled = function (value) {
     resolve(onFulfilled(value));
   };
   const onSpreadRejected = function (value) {
     resolve(onRejected(value));
   };
   if (prev.pending) {
     prev.pending.push([onSpreadFulfilled, onSpreadRejected]);
   } else {
     prev.value.then(onSpreadFulfilled, onSpreadRejected);
   }
 });
 return promise;
};
// 封装为一个可重用的高阶函数。
// 如果 fun 执行失败了,则返回 onError 的结果。
function returnWhenError(onError) {
 return fun =>
   (...args) => {
     let result;
     try {
       result = fun(...args);
     } catch (e) {
       result = onError(e);
     }
     return result;
   };
}

然后我们可以加入 catch 方法:

Promise.prototype.catch = function (onRejected) {
 // 在 then 中忽略掉“成功”状态的回调。
 return Promise.prototype.then.call(this, undefined, onRejected);
};
// 测试一下。
const p = new Promise(resolve => {
 setTimeout(() => resolve(666), 100);
});
p.then(res => {
 console.log('res1: %s', res);
 throw new Error('test error1');
}).then(undefined, err => {
 console.log('err1: %s', err.message);
 throw new Error('test error2');
}).catch(err => {
 console.log('err2: %s', err.message);
});
// 输出:
// res1: 666
// err1: test error1
// err2: test error2

上面的完整代码在这里:p4.js

到了这里,基本上 Promise 的基本功能就差不多完成了。不过还有一些不太完善的地方,我们来继续做一些优化。

一些优化

封装私有变量

this.pending 和 this.value 从外部是可以读写的,不够安全和健壮。而我又还是想用构造函数和原型方法,不想用闭包来封装。我这里采用的是 WeakMap 来达到目的,关键的修改如下:

const refMap = new WeakMap();
// ...
function Promise(exector) {
 // 用当前的实例引用作为 key,把想隐藏的数据放进一个对象里。
 refMap.set(this, {
   pending: [],
   value: undefined
 });
 const resolve = value => {
   // 取出封装的数据。
   const data = refMap.get(this);
   if (data.pending) {
     data.value = wrapToThenable(value);
     for (const handlers of data.pending) {
       data.value.then.apply(data.value, handlers);
     }
     data.pending = undefined;
   }
 };
 // ...
}

同样 then 也修改一下:

Promise.prototype.then = function (onFulfilled, onRejected) {
 // ...
 const promise = new Promise(resolve => {
   const onSpreadFulfilled = function (value) {
     resolve(onFulfilled(value));
   };
   const onSpreadRejected = function (value) {
     resolve(onRejected(value));
   };
   // 取出封装的数据。
   const data = refMap.get(prev);
   if (data.pending) {
     data.pending.push([onSpreadFulfilled, onSpreadRejected]);
   } else {
     data.value.then(onSpreadFulfilled, onSpreadRejected);
   }
 });
 return promise;
};

上面的完整代码在这里:p5.js

当 Promise 实例被垃圾回收时,对应在 WeakMap 中的私有数据对象引用也会被消除,没有内存泄漏问题,这种方案非常适合用来封装私有变量。

调用顺序

目前的 Promise 在执行时有调用顺序问题,比如:

const p = new Promise(resolve => resolve(1));
p.then(res => {
 console.log('res1:', res);
 return res + 1;
}).then(res => {
 console.log('res2:', res);
});
p.then(res => {
 console.log('res3:', res);
});
console.log('Hi!');
// 目前的输出是:
// res1: 1
// res2: 2
// res3: 1
// Hi!
// 正确的输出应该是:
// Hi!
// res1: 1
// res3: 1
// res2: 2

一个简单的做法是利用 setTimeout 来改进:

function Promise(exector) {
 // ...

 const resolve = value => {
   const data = refMap.get(this);
   if (data.pending) {
     data.value = wrapToThenable(value);
     for (const handlers of data.pending) {
       // 延迟执行。
       enqueue(() => {
         data.value.then.apply(data.value, handlers);
       });
     }
     data.pending = undefined;
   }
 };

 // ...
}
Promise.prototype.then = function (onFulfilled, onRejected) {
 // ...
 const promise = new Promise(resolve => {
   // ...
   if (data.pending) {
     data.pending.push([onSpreadFulfilled, onSpreadRejected]);
   } else {
     // 延迟执行。
     enqueue(() => {
       data.value.then(onSpreadFulfilled, onSpreadRejected);
     });
   }
 });
 return promise;
};
function enqueue(callback) {
 setTimeout(callback, 1);
}

enqueue 的作用是模拟按入队顺序来延迟执行函数。通过对所有 then 调用的延迟执行,可以保证按正确的注册顺序和决议顺序来执行了,上面的完整代码在这里:p6.js

接下来呢?

到了这里我觉得就先差不多了,毕竟此文的目的是分享和交流一种 Promise 的设计思路和心得,而不是去造一个完美的 Promise。手写一个 Promise 这个结果不应该是我们的目的,观察演进过程中的思路和方案才是我们需要吸收的东西。

作者:deepfunc
https://juejin.cn/post/7085298532365631501

链接: https://fly63.com/article/detial/11720

你真的了解 Promise 吗?Promise 必知必会(十道题)

Promise 想必大家十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。

剖析Promise内部结构,一步一步实现一个完整的、能通过所有Test case的Promise类

本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,Promise标准中仅指定了Promise对象的then方法的行为,其它一切我们常见的方法/函数都并没有指定.

Async/Await替代Promise的6个理由

Async/Await替代Promise的6个理由:Async/Await是近年来JavaScript添加的最革命性的的特性之一。它会让你发现Promise的语法有多糟糕,而且提供了一个直观的替代方法。

Promise 原理解析与实现(遵循Promise/A+规范)

Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一,Promise 是一个构造函数, new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数

简单模仿实现 Promise 的异步模式

这篇文章是考虑如何自己实现一个简单 Promise,用以理解 Promise。和原生 Promise的调用方法一样,支持链式调用,本文实现的方法只能用于参考Promise的原理,还有很多特性没有实现,比如 race,all 方法的实现。

数组的遍历你都会用了,那Promise版本的呢

在对数组进行一些遍历操作时,发现有些遍历方法对Promise的反馈并不是我们想要的结果。async/await为Promise的语法糖,文中会直接使用async/await替换Promise;map可以说是对Promise最友好的一个函数了,

Promise使用时应注意的问题

最近在使用axios库时遇到了个问题,后端接口报了500错误,但前端并未捕获到。在axios整体配置的代码中,过滤http code时,调用了filter401()、filter500(),但是这里注意并未将两个filter函数的结果返回,也就是并未返回promise,这就是导致问题出现的原因

es6 Promise 的基础用法

想必接触过Node的人都知道,Node是以异步(Async)回调著称的,其异步性提高了程序的执行效率,但同时也减少了程序的可读性。如果我们有几个异步操作,并且后一个操作需要前一个操作返回的数据才能执行

关于 Promise 的 9 个提示

你可以在 .then 里面 return 一个 Promise,每次执行 .then 的时候都会自动创建一个新的 Promise,对调用者来说,Promise 的 resolved/rejected 状态是唯一的,Promise 构造函数不是解决方案,使用 Promise.resolve

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

Promise的一些用法在此不多赘述,本篇主要带领你手写一个Promise源码,学完你就会发现:Promise没有你想象中的那么难.本篇大概分为以下步骤:实现简单的同步Promise、增加异步功能、增加链式调用then、增加catch finally方法、增加all race 等方法、实现一个promise的延迟对象defer、最终测试

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!