分析Promise并手动实现myPromise

119 阅读6分钟
/**
 * 1.Promise一共有三种状态,成功fulfilled 失败rejected 等待pending
 * pending => fulfilled 等待变成成功
 * pending => rejeced 等待变成失败
 * 状态修改是不可逆的,一旦确定就不可更改
 * 2.resolve和reject函数是用该更改状态的
 *  resolve:fulfilled
 *  reject:rejected
 * 3.then方法是定义在原型链上的,用来判断当前的状态,成功就调用成功回调,失败就调用失败回调
 * 4.异步方式的处理,成功或者失败后再进行调用失败或者成功返回的回调函数
 * 5.then方法多次调用,处理多个函数,将回调保存在数组中依次执行(主要为异步处理)
 * 6.then方法可以链式调用,后面的then方法的回调函数可以拿到上一个then方法的返回值(需要返回Promise对象)
 * 7.then方法Promise调用自己的时候会进行报错处理
 * 8.参数可选,当不传参数的时候,值会一直向下传递,需要自己补齐方法
 * 9.链式调用是其他错误状态的的补存,--执行器和then方法都可能出错
 * 10.Promise的all方法实现,all为一个静态方法,需要一个数组作为参数,一次返回所有Promise的数组结果
 * 11.Promise的resolve方法是静态方法,快速创建一个Promise对象,将传入的值作为Promise返回值
 * 12.Promise的finally方法为原型对象上的方法, 无论成功或者失败都会调用 可以链式调用then方法来达到最终的返回结果
 * 13.Promise的catch方法为原型对象上的方法,处理最终的状态为失败,内部相当于调用then方法成功回调传入undefined
 */
const { reject, values } = require("lodash");
const PENDING = 'pending';  //等待
const FULFILLED = 'fulfilled';  //成功
const REJECTED = 'rejected';  //失败
// MyPromise 是一个类,类里面有一个执行器,在调用MyPromise的时候,执行器会立即执行
class MyPromise {
    // executor 就是构造器的意思
    constructor(executor) {
        // 捕获构造器方法报错信息
        try {
            // 直接调用构造器
            executor(this.resolve, this.reject);
        } catch (e) {
            this.reject(e);
        }
    }
    // MyPromise默认状态
    status = PENDING;
    // 成功之后的值
    value = undefined;
    // 失败之后的原因
    reason = undefined;
    // 成功之后的回调函数
    successCallback = [];
    // 失败之后的回调函数
    failCallback = [];
    resolve = value => {
        // 如果状态不是等待 PENDING 阻止程序向下执行
        if (this.status !== PENDING) return;
        // 将状态更改为成功
        this.status = FULFILLED;
        //保存成功时候的值
        this.value = value;
        // 判断成功回调是否存在,如果存在就调用
        //this.successCallback && this.successCallback(this.value);//只满足一次调用,如果有.then方法链式调用就不能满足要求
        // 所以进行改造 shift方法是删除数组中的第一项并返回
        while (this.successCallback.length) this.successCallback.shift()();
    }
    reject = reason => {
        // 如果状态不是等待 PENDING 阻止程序向下执行
        if (this.status !== PENDING) return;
        // 将状态更改为失败
        this.status = REJECTED;
        // 保存失败时候的原因
        this.reason = reason;
        // 判断失败回调是否存在,如果存在就调用
        // this.failCallback && this.failCallback(this.reason); //只满足一次调用,如果有.then方法链式调用就不能满足要求
        // 所以进行改造  shift方法是删除数组中的第一项并返回
        while (this.failCallback.length) this.failCallback.shift()();
    }
    then(successCallback, failCallback) {
        // 判断then方法是否有参数返回,如果没有,就把上一次执行的结果继续传递下去
        successCallback = successCallback ? successCallback : value => value;
        failCallback = failCallback ? failCallback : reason => { throw reason };
        //then方法要实现链式调用,必须返回一个promise对象
        let promise2 = new Promise((resolve, reject) => {
            // 判断状态
            if (this.status === FULFILLED) {
                // 这个地方使用setTimeout并不是为了延迟执行,而是为了转化为异步代码
                // 原因:因为promise2是New Promise执行完之后才能拿到,如果不转换为异步代码,直接去获取promise2的是获取不到预想的值的
                setTimeout(() => {
                    // 捕获then方法的错误信息
                    try {
                        // 调用成功之后的回调方法
                        let x = successCallback(this.value);
                        // 判断x为普通值还是promise对象
                        // 如果是普通值,直接调用resolve
                        // 如果是promise对象,查看promise对象返回的结果
                        // 再根据promise对象返回的结果,决定调用resolve还是那个reject
                        resolvePromise(x, promise2, resolve, reject);
                    } catch (e) {
                        this.reject(e);
                    }
                }, 0);
            } else if (this.status === REJECTED) {
                // 这个地方使用setTimeout并不是为了延迟执行,而是为了转化为异步代码
                // 原因:因为promise2是New Promise执行完之后才能拿到,如果不转换为异步代码,直接去获取promise2的是获取不到预想的值的
                setTimeout(() => {
                    // 捕获then方法的错误信息
                    try {
                        // 调用成功之后的回调方法
                        let x = failCallback(this.reason);
                        // 判断x为普通值还是promise对象
                        // 如果是普通值,直接调用resolve
                        // 如果是promise对象,查看promise对象返回的结果
                        // 再根据promise对象返回的结果,决定调用resolve还是那个reject
                        resolvePromise(x, promise2, resolve, reject);
                    } catch (e) {
                        this.reject(e);
                    }
                }, 0);
            } else {
                //当前状态为等待状态
                this.successCallback.push(() => {
                    // 这个地方使用setTimeout并不是为了延迟执行,而是为了转化为异步代码
                    // 原因:因为promise2是New Promise执行完之后才能拿到,如果不转换为异步代码,直接去获取promise2的是获取不到预想的值的
                    setTimeout(() => {
                        // 捕获then方法的错误信息
                        try {
                            // 调用成功之后的回调方法
                            let x = successCallback(this.value);
                            // 判断x为普通值还是promise对象
                            // 如果是普通值,直接调用resolve
                            // 如果是promise对象,查看promise对象返回的结果
                            // 再根据promise对象返回的结果,决定调用resolve还是那个reject
                            resolvePromise(x, promise2, resolve, reject);
                        } catch (e) {
                            this.reject(e);
                        }
                    }, 0);
                });
                this.failCallback.push(() => {
                    // 这个地方使用setTimeout并不是为了延迟执行,而是为了转化为异步代码
                    // 原因:因为promise2是New Promise执行完之后才能拿到,如果不转换为异步代码,直接去获取promise2的是获取不到预想的值的
                    setTimeout(() => {
                        // 捕获then方法的错误信息
                        try {
                            // 调用成功之后的回调方法
                            let x = failCallback(this.reason);
                            // 判断x为普通值还是promise对象
                            // 如果是普通值,直接调用resolve
                            // 如果是promise对象,查看promise对象返回的结果
                            // 再根据promise对象返回的结果,决定调用resolve还是那个reject
                            resolvePromise(x, promise2, resolve, reject);
                        } catch (e) {
                            this.reject(e);
                        }
                    }, 0);
                });
            }
        });
        return promise2;
    }
    // 不管成功还是失败都调用该方法
    finally(callback) {
        return this.then(value => {
            // 把回调函数放在resolve方法中,是为了让代码按照顺序执行,全部执行完成之后再进行返回
            return MyPromise.resolve(callback()).then(() => value);
        }, reason => {
            return MyPromise.resolve(callback()).then(() => { throw reason });
        });
    }
    catch(failCallback) {
        return this.then(undefined, failCallback);
    }
    static all(array) {
        let result = [];
        let index = 0;//用来判断代码是否全部执行完
        return new MyPromise((resolve, reject) => {
            function addData(key, value) {
                result[key] = value;
                index++;
                if (index === array.length) {
                    resolve(result);
                }
            }
            for (let i = 0; i < array.length; i++) {
                let current = array[i];
                if (current instanceof MyPromise) {
                    // promise对象
                    current.then(value => addData(i, value), reason => reject(reason))
                } else {
                    // 普通值
                    addData(i, array[i]);
                }
            }
        })
    }
    static resolve(value) {
        // 如果参数是一个promise对象,就原封不动的返回
        if (value instanceof MyPromise) return value;
        // 如果是普通值,就转换为promise对象进行返回
        return new MyPromise(resolve => resolve(value))
    }
}
function resolvePromise(x, promise2, resolve, reject) {
    if (promise2 === x) {
        return reject(new TypeError("Chaining cycle detected for promise #<Promise>"));
    }
    if (x instanceof MyPromise) {
        //是promise对象
        // x.then(value => resolve(value), reason => reject(reason));
        // 简化上面的代码
        x.then(resolve, reject);
    } else {
        // 是普通值
        resolve(x);
    }
}
module.exports = MyPromise