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

49次阅读

共计 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 = [];

function resolve(value){
if(that.status === ‘pending’){
that.status = ‘resolved’;
that.value = value;
/** 3 发布
* 等待状态发生变更
* 状态变更后 立即执行之前存放在相应数组中所有的成功或失败的回调函数
* 即 发布
*/
that.onFilFulledCallbacks.forEach((fn)=>{
fn();
});
}
}
function reject(reason){
if(that.status === ‘pending’){
that.status = ‘rejected’;
that.reason = reason;
/** 4 同上 */
that.onRejectedCallbacks.forEach((fn)=>{
fn();
});
}
}
executor(resolve,reject);
}

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 = [];

function resolve(value){
if(that.status === ‘pending’){
that.status = ‘resolved’;
that.value = value;
that.onFilFulledCallbacks.forEach((fn)=>{
fn();
});
}
}
function reject(reason){
if(that.status === ‘pending’){
that.status = ‘rejected’;
that.reason = reason;
that.onRejectedCallbacks.forEach((fn)=>{
fn();
});
}
}
executor(resolve,reject);
}

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;
}

function resolvePromiseRelation(promise2,promise3,resolve,reject){
/** 4 防止自己等待自己 一直循环等待 */
if(promise2 === promise3){
return reject(new TypeError(‘ 循环引用了!’));
}
/** 8 一个标示 表示当前没有被调用过
* 确保 resolve 或者 reject 后的状态不会再次发生变更
*/
let called;
/** 5 保证 promise3 是一个引用类型
* 判断新返回值 promise3 的类型
* 如果是普通值常量 就直接 resolve 导出 */
if(promise3!==null&&(typeof promise3 === ‘object’||typeof promise3 === ‘function’)){
try{
/** 6 确保 promise3 是一个 Promise
* 判断 promise3 的 then 方法
* 如果存在 并且是一个 function 类型
* 就表示 promise3 是一个 Promise */
if(typeof promise3.then === ‘function’){
/** 9 执行 promise3 的 then 方法
* 因为 promise3 也是一个 Promise
* 需要再次解析 promise3 的 then 方法
* 直到解析到最后的返回值不是一个 Promise 类型为止
*/
promise3.then(promise3, (promise4)=>{
/** 同 8 */
if(called) return;
called = true;
/** 10 递归解析新的返回值的类型
* 解析到返回值不是一个 Promise 类型为止
*/
resolvePromiseRelation(promise3,promise4,resolve,reject);
},(r)=>{
/** 同 8 */
if(called) return;
called = true;
reject(r);
});
}else{
/** 7 此时 promise3 是一个普通对象 直接 resolve() */
resolve(promise3);
}
}catch(e){
/** 同 8 */
if(called) return;
called = true;
reject(e);
};
}else{
/** 同 5 普通值直接 resolve()*/
resolve(promise3);
}
}

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 = [];

function resolve(value){
if(that.status === ‘pending’){
that.status = ‘resolved’;
that.value = value;
that.onFilFulledCallbacks.forEach((fn)=>{
fn();
});
}
}
function reject(reason){
if(that.status === ‘pending’){
that.status = ‘rejected’;
that.reason = reason;
that.onRejectedCallbacks.forEach((fn)=>{
fn();
});
}
}
executor(resolve,reject);
}

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;
}

function resolvePromiseRelation(promise2,promise3,resolve,reject){
if(promise2 === promise3){
return reject(new TypeError(‘ 循环引用了!’));
}
let called;
if(promise3!==null&&(typeof promise3 === ‘object’||typeof promise3 === ‘function’)){
try{
if(typeof promise3.then === ‘function’){
promise3.then(promise3, (promise4)=>{
if(called) return;
called = true;
resolvePromiseRelation(promise3,promise4,resolve,reject);
},(r)=>{
if(called) return;
called = true;
reject(r);
});
}else{
resolve(promise3);
}
}catch(e){
if(called) return;
called = true;
reject(e);
};
}else{
resolve(promise3);
}
}

/** 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 = [];

function resolve(value){
if(that.status === ‘pending’){
that.status = ‘resolved’;
that.value = value;
that.onFilFulledCallbacks.forEach((fn)=>{
fn();
});
}
}
function reject(reason){
if(that.status === ‘pending’){
that.status = ‘rejected’;
that.reason = reason;
that.onRejectedCallbacks.forEach((fn)=>{
fn();
});
}
}
executor(resolve,reject);
}

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;
}

function resolvePromiseRelation(promise2,promise3,resolve,reject){
if(promise2 === promise3){
return reject(new TypeError(‘ 循环引用了!’));
}
let called;
if(promise3!==null&&(typeof promise3 === ‘object’||typeof promise3 === ‘function’)){
try{
if(typeof promise3.then === ‘function’){
promise3.then(promise3, (promise4)=>{
if(called) return;
called = true;
resolvePromiseRelation(promise3,promise4,resolve,reject);
},(r)=>{
if(called) return;
called = true;
reject(r);
});
}else{
resolve(promise3);
}
}catch(e){
if(called) return;
called = true;
reject(e);
};
}else{
resolve(promise3);
}
}

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 = [];

function resolve(value){
if(that.status === ‘pending’){
that.status = ‘resolved’;
that.value = value;
that.onFilFulledCallbacks.forEach((fn)=>{
fn();
});
}
}
function reject(reason){
if(that.status === ‘pending’){
that.status = ‘rejected’;
that.reason = reason;
that.onRejectedCallbacks.forEach((fn)=>{
fn();
});
}
}
executor(resolve,reject);
}

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;
}

function resolvePromiseRelation(promise2,promise3,resolve,reject){
if(promise2 == promise3){
return reject(new TypeError(‘ 循环引用了!’));
}
let called;
if(promise3!==null&&(typeof promise3 === ‘object’ || typeof promise3 === ‘function’)){
try{
if(typeof promise3.then === ‘function’){
promise3.then.call(promise3, (promise4)=>{
if(called) return;
called = true;
resolvePromiseRelation(promise3,promise4,resolve,reject);
},(r)=>{
if(called) return;
called = true;
reject(r);
});
}else{
resolve(promise3);
}
}catch(e){
if(called) return;
called = true;
reject(e);
};
}else{
resolve(promise3);
}
}

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

正文完
 0