Promise的模拟实现

结构

promise经常使用的方法类似下边这样：

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

从这个例子看来promise是作为构造函数使用，参数是一个function（暂且称为executor），通过调用then设置成功或者失败的回调函数，所以MyPromise的基本结构如下：

const MyPromise = function (executor) {
}
MyPromise.prototype.then=function () {}

模拟promise基本功能

继续上边的例子，我们来看看promise主要的工作流程：

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

从上边例子可以看出promise通过then方法注册成功和失败的回调函数，然后在executor中通过resolve和reject给成功和失败的回调函数传递参数，然后调用。
下边就是模拟promsie的代码：

STATUS = {
    SUCCESS: 'SUCCESS',
    FAIL: 'FAIL',
    PENDING: 'PENDING'
};

const MyPromise = function (executor) {
    this.status = STATUS.PENDING; // 存储当前promise状态
    this.onFulfilled = Function.prototype; // 存储成功的回调函数
    this.onRejected = Function.prototype; // 存储失败的回调函数
    this.value = '';
    this.error = '';
const resolve = (value) => {
        if (value instanceof MyPromise) {
            return MyPromise.then(resolve, reject)
        }
        setTimeout(() => {
            if (this.status === STATUS.PENDING) {
                this.status = STATUS.SUCCESS;
                this.value = value;
                this.onFulfilled(this.value);
            }
        }, 20)
    };

    const reject = (error) => {
        if (error instanceof MyPromise) {
            return MyPromise.then(resolve, reject)
        }
        setTimeout(() => {
            if (this.status === STATUS.PENDING) {
                this.status = STATUS.FAIL;
                this.error = error;
                this.onRejected(this.error);
            }
        }, 20)
    };
try {
 executor(resolve, reject)
} catch(e) {
 reject(e)
}
};

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (data) => data;
    onRejected = typeof onRejected === 'function' ? onRejected : (error) => { throw error};
    if (this.status === STATUS.SUCCESS) {
        this.onFulfilled(this.value)
    } else if (this.status === STATUS.FAIL) {
        this.onRejected(this.error);
    } else if (this.status === STATUS.PENDING) {
        this.onFulfilled = onFulfilled;
        this.onRejected = onRejected;
    }
};

在构造函数中设置resolve和reject方法，当调用这两个方法会将参数存在对象中供成功或者失败回调函数调用，resolve会将值存在value中，reject会将值存在error中，然后调用对应状态的回调函数。

在then方法中进行判断：

  1. 如果promise处于pending状态就给promise注册回调函数
  2. 如果成功或者失败则直接调用回调函数将promise中的value或者error传过去。

这块注意点：

  1. resolve和reject函数中使用了setTimeout，作用是确保调用的时候回调函数已经挂载在对象上了
  2. resolve和reject函数中加入了状态判断是因为promise在状态一旦进入失败或者成功后状态就不可更改了。

完善promise多次挂载

promise允许多次挂载例如下边这种情况：

let promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('data')
    }, 2000)
})

promise.then(data => {
    console.log(`1: ${data}`)
})
promise.then(data => {
    console.log(`2: ${data}`)
})

promise通过then方法挂载了两个成功回调函数，按照上边的方法并不能完成这个需求，所以加了一些修改：

STATUS = {
    SUCCESS: 'SUCCESS',
    FAIL: 'FAIL',
    PENDING: 'PENDING'
};

const MyPromise = function (executor) {
    this.status = STATUS.PENDING;
    // 将回调函数改为一个数组
    this.onFulfilledArray = [];
    this.onRejectedArray = [];
    this.value = '';
    this.error = '';
    const resolve = (value) => {
        if (value instanceof MyPromise) {
            return MyPromise.then(resolve, reject)
        }
        setTimeout(() => {
            if (this.status === STATUS.PENDING) {
                this.status = STATUS.SUCCESS;
                this.value = value;
                this.onFulfilledArray.forEach((func) => {
                    func(this.value);
                });
            }
        }, 20)
    };

    const reject = (error) => {
        if (error instanceof MyPromise) {
            return MyPromise.then(resolve, reject)
        }
        setTimeout(() => {
            if (this.status === STATUS.PENDING) {
                this.status = STATUS.FAIL;
                this.error = error;
                this.onRejectedArray.forEach((func) => {
                    func(this.error);
                });
            }
        }, 20)
    };
    try {
        executor(resolve, reject)
    } catch(e) {
        reject(e)
    }
};

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (data) => data;
    onRejected = typeof onRejected === 'function' ? onRejected : (error) => { throw error};
    if (this.status === STATUS.SUCCESS) {
        onFulfilled(this.value);
    } else if (this.status === STATUS.FAIL) {
        onRejected(this.error);
    }else if (this.status === STATUS.PENDING) {
        this.onFulfilledArray.push(onFulfilled);
        this.onRejectedArray.push(onRejected);
    }
};

promise去掉成功或者失败回调函数存储，改为使用数组存储成功和失败的回调，然后，在then函数中如果promise状态是pending就将回调函数加入数组中存储下，接着修改了resolve和reject方法，不是直接调用回调函数然后穿参而是遍历回调函数数组依次执行。

链式调用

promise的then是支持链式调用的，then方法依然会返回promise，就像下边这样：

const promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('lucas')
    }, 2000)
})

promise.then(data => {
    console.log(data)
    return `${data} next then`
})
    .then(data => {
        console.log(data) // lucas next then
    })

因此代码还需要进一步完善,then要返回promise，then方法修改为如下：

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (data) => data;
    onRejected = typeof onRejected === 'function' ? onRejected : (error) =>{ throw error};
    let promise = null;
    if (this.status === STATUS.SUCCESS) {
        promise = new MyPromise((resolve, reject) => {
            setTimeout(() => { // 保持resolve操作在then后边
                try {
                    resolve(onFulfilled(this.value));
                } catch (e) {
                    reject(e);
                }
            })

        });
        return promise;
    } else if (this.status === STATUS.FAIL) {
        promise = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                try {
                    resolve(onRejected(this.error));
                } catch (e) {
                    reject(e);
                }
            })

        });
        return promise;
    } else if (this.status === STATUS.PENDING) {
        promise = new MyPromise((resolve, reject) => {
            this.onFulfilledArray.push((value) => {
                try {
                    resolve(onFulfilled(value)); 
                } catch (e) {
                    reject(e);
                }
            });
            this.onRejectedArray.push((error) => {
                try {
                    reject(onRejected(error));
                } catch (e) {
                    reject(e);
                }
            });
        });
        return promise;
    }
};

难点在于pending状态下的处理，这里使用了闭包的思想，在给回调函数缓存数组中存入回调函数的时候，闭包会存下promise返回值的resolve和reject方法与then方法的两个回调函数，这样在promise的resolve与reject方法调用回调函数的时候，会从闭包中取出对应的内容，完成功能。

链式调用处理then方法直接返回promise的情况

上边的例子中没有处理then方法回调函数如果直接返回一个promise的情况，例子如下：

const promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('lucas')
    }, 2000)
})

promise.then(data => {
    console.log(data)
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`${data} next then`)
        }, 4000)
    })
})
    .then(data => {
        console.log(data)
    })

这种情况在promise中会解构promise返回，所以上边代码需要进行处理，加入对于返回值是promise的解构处理。
then方法修改为下边这样：

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (data) => data;
    onRejected = typeof onRejected === 'function' ? onRejected : (error) => { throw error};
    let promise = null;
    if (this.status === STATUS.SUCCESS) {
        promise = new MyPromise((resolve, reject) => {
            setTimeout(() => { // 保持resolve操作在then后边
                try {
                    resolvePromiseResult(promise, onFulfilled(this.value), resolve, reject);
                } catch (e) {
                    reject(e);
                }
            })

        });
        return promise;
    } else if (this.status === STATUS.FAIL) {
        promise = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                try {
                    resolvePromiseResult(promise, onRejected(this.error), resolve, reject);
                } catch (e) {
                    reject(e);
                }
            })

        });
        return promise;
    } else if (this.status === STATUS.PENDING) {
        promise = new MyPromise((resolve, reject) => {
            this.onFulfilledArray.push((value) => {
                try {
                    resolvePromiseResult(promise, onFulfilled(value), resolve, reject);
                } catch (e) {
                    reject(e);
                }
            });
            this.onRejectedArray.push((error) => {
                try {
                    resolvePromiseResult(promise, onRejected(error), resolve, reject);
                } catch (e) {
                    reject(e);
                }
            });
        });
        return promise;
    }
};

这里添加了一个方法将promise和返回值与resolve和reject作为参数传递了进去，在方法内部进行处理。
添加方法的完整代码如下：

function resolvePromiseResult(promise, result, resolve, reject) {
    if (result instanceof MyPromise) {
        if (result.status === STATUS.PENDING) {
            result.then((data) => {
                resolvePromiseResult(promise, data, resolve, reject);
            }, reject)
        } else {
            result.then(resolve, reject);
        }
        return;
    }

    const isComplexObject = (typeof result === 'function' || typeof result === 'object') && result !== null;
    if (isComplexObject) {
        try {
            const thenable = result.then;
            if (typeof thenable === 'function') {
                thenable.call(result, (data) => {
                    return resolvePromiseResult(promise, data, resolve, reject);
                }, (error) => {
                    return reject(error);
                })
            } else {
                resolve(result);
            }
        } catch (e) {
           return reject(e);
        }
    } else {
        resolve(result);
    }
}

代码重点如下：

  1. 首先对与result是promise进行处理，当promise是pending状态，进行递归调用，如果是success后者fail状态直接改变promise状态传递给resolve与reject函数回调。
    2.针对result如果是类promise处理，与promise对象一样的处理方式

promise 静态方法实现

catch

catch方法很简单

MyPromise.prototype.catch = function(catchFunc) {
   return this.then(null, catchFunc)
}

成功的情况我们不处理只处理错误的情况

Promise.resolve与Promise.reject模拟

resolve与reject静态方法也很简单就是返回一个给定值的promise

MyPromise.resolve = function (value) {
    return new MyPromise((resolve, reject) => {
        resolve(value)
    })
};

MyPromise.reject = function (value) {
    return new MyPromise((resolve, reject) => {
        reject(value)
    })
};

Promise.all与 Promise.race模拟

promise的all方法是用来处理多个promise的方法，参数是个promise数组，当所有promise完成后会返回一个数组，存储每个promise的返回结果，模拟代码也很简单，如下：

MyPromise.all = function (promiseArray) {
    if (!Array.isArray(promiseArray)) {
        throw new Error('The arguments should be an array!')
    }
    return new MyPromise((resolve, reject) => {
            try {
                let resultArray = [];

                const length = promiseArray.length;

                for (let i = 0; i < length; i++) {
                    promiseArray[i].then(data => {
                        resultArray.push(data);

                        if (resultArray.length === length) {
                            resolve(resultArray)
                        }
                    }, reject)
                }
            } catch (e) {
                reject(e)
            }
        }
    )
}

race方法是当第一个promsie返回后就返回结果，参数也是一个promise数组，实现方法也非常简单，代码如下：

MyPromise.race = function (promiseArray) {
    if (!Array.isArray(promiseArray)) {
        throw new TypeError('The arguments should be an array!')
    }
    return new MyPromise((resolve, reject) => {
        try {
            const length = promiseArray.length
            for (let i = 0; i < length; i++) {
                promiseArray[i].then(resolve, reject)
            }
        } catch (e) {
            reject(e)
        }
    })
}

道理也很简单就是在第一个promsie响应的时候就返回结果终止订阅。

结束语

本篇文章尝试模拟一个promise，借此来深入理解下这个js常用且很重要的功能，分享出来希望可以帮助和我一样的前端小白，很多地方实现可能不够严谨，或者可能存在错误，欢迎大家指正。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335