Promise 手写实现

视频教程：https://www.bilibili.com/video/BV1GA411x7z1?p=1

1函数

// 声明构造函数
function Promise(executor) {
    this.promiseStatus = 'pending'; //promise状态值
    this.promiseResult = null; // promise结果值
    this.callback = []; //then方法中的回调函数

    // 保存实例
    const self = this;

    // 成功回调的函数
    function resolve(data) {
        //1 修改promise状态值 promiseStatus
        self.promiseStatus = 'fulfilled';
        //2 保存结果 promiseResult
        self.promiseResult = data;
        // 执行callback中存的回调方法
        setTimeout(() => {
            self.callback.forEach((item) => {
                item.onResolved(self.promiseResult);
            }); 
        });
    }

    // 失败回调的函数
    function reject(data) {
        //1 修改promise状态值 promiseStatus
        self.promiseStatus = 'rejected';
        //2 保存结果 promiseResult
        self.promiseResult = data;
        // 执行callback中存的回调方法
        setTimeout(() => {
            self.callback.forEach((item) => {
                item.onRejected(self.promiseResult);
            });
        });
    }

    // 捕捉异常并返回 错误状态
    try {
        executor(resolve, reject);
    } catch (error) {
        reject(error);
    }
}

/**
 * 添加then方法
 * @param {*} onRelovad  成功状态的回调
 * @param {*} onRejected  失败状态的回调
 */
Promise.prototype.then = function (onResolved, onRejected) {
    let self = this;
    console.log('then方法');
    // 判断成功回调以及失败回调，是否存在
    if(typeof onResolved !== 'function' ){
        onResolved = value => value;
    }
    if(typeof onRejected !== 'function' ){
        onRejected = reason => {
            throw reason;
        };
    }

    // 返回一个promise对象
    return new Promise((resolve, reject) => {
        function callback(type) {
            try {
                // 获取then的回调函数的结果，作为返回的promise的结果值
                let result = type(self.promiseResult);
                if (result instanceof Promise) {
                    // 如果返回值是promise对象，
                    result.then(
                        (v) => {
                            resolve(v);
                        },
                        (r) => {
                            reject(r);
                        }
                    );
                } else {
                    // 不过不是promise对象，调用成功的回调函数
                    resolve(result);
                }
            } catch (error) {
                reject(error);
            }
        }
        // 成功状态
        if (this.promiseStatus === 'fulfilled') {
            console.log('then方法_成功状态');
            setTimeout(() => {
                callback(onResolved)
            });
        }

        // 错误状态
        if (this.promiseStatus === 'rejected') {
            console.log('then方法_错误状态');
            setTimeout(() => {
                callback(onRejected)
            });
        }

        // pending状态处理
        if (this.promiseStatus === 'pending') {
            console.log('then方法_pending状态');
            // 保存当前的回调函数
            this.callback.push({
                onResolved: function () {
                    callback(onResolved)
                },
                onRejected: function () {
                    callback(onRejected)
                },
            });
        }
    });
};


/**
 * 添加catch方法
 * @param {*} onRejected  失败状态的回调
 */
 Promise.prototype.then = function (onRejected) {
    return this.then(undefined,onRejected);
 }

 /**
  * 添加resolve方法
  * @param {*} value 
  * @returns 
  */
 Promise.resolve =  function(value){
    // 返回一个promise对象
    return new Promise((resolve,reject) =>{
        if(value instanceof Promise){
            // 返回promise对象的处理结果
            value.then(v =>{
                resolve(v)
            },r =>{
                reject(r)
            })
        }else{
            resolve(value)
        }
    })
 }
 
 /**
  * 添加reject方法
  * @param {*} value 
  * @returns 
  */
  Promise.reject =  function(reason){
    // 返回一个promise对象
    return new Promise((resolve,reject) =>{
        reject(reason)
    })
 }


/**
 * all 方法 只要一个失败则返回失败的promise值，都成功返回所有promise成功值的数组
 * @param {*} promises  promises数组
 */
 Promise.all = function(promises){
    // 计数count
    let count = 0;
    // 成功返回的数据
    let arr = [];

    // 返回一个promise对象
    return new Promise((resolve,reject) => {
        // 遍历promise对象
        for(let i = 0;i<promises.length;i++){
            promises[i].then(v => {
                // 每个promise对象都是成功，才可以返回
                count++;
                arr[i] = v;
                if(count === promises.length){
                    resolve(arr)
                }
            },r =>{
                // 只要有一个对象失败，直接返回失败。修改状态
                reject(r)
            })
        }
    })
 }

 
/**
 * race 方法 返回最先执行的promise的值
 * @param {*} promises  promises数组
 */
 Promise.all = function(promises){
    // 返回一个promise对象
    return new Promise((resolve,reject) => {
        // 遍历promise对象
        for(let i = 0;i<promises.length;i++){
            promises[i].then(v => {
                resolve(arr)
            },r =>{
                reject(r)
            })
        }
    })
 }

2.class

// 声明类
class Promise {
    // 构造函数
    constructor(executor) {
        this.promiseStatus = 'pending'; //promise状态值
        this.promiseResult = null; // promise结果值
        this.callback = []; //then方法中的回调函数

        // 保存实例
        const self = this;

        // 成功回调的函数
        function resolve(data) {
            //1 修改promise状态值 promiseStatus
            self.promiseStatus = 'fulfilled';
            //2 保存结果 promiseResult
            self.promiseResult = data;
            // 执行callback中存的回调方法
            setTimeout(() => {
                self.callback.forEach((item) => {
                    item.onResolved(self.promiseResult);
                });
            });
        }

        // 失败回调的函数
        function reject(data) {
            //1 修改promise状态值 promiseStatus
            self.promiseStatus = 'rejected';
            //2 保存结果 promiseResult
            self.promiseResult = data;
            // 执行callback中存的回调方法
            setTimeout(() => {
                self.callback.forEach((item) => {
                    item.onRejected(self.promiseResult);
                });
            });
        }

        // 捕捉异常并返回 错误状态
        try {
            executor(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }

    // then
    then(onResolved, onRejected) {
        let self = this;
        console.log('then方法');
        // 判断成功回调以及失败回调，是否存在
        if (typeof onResolved !== 'function') {
            onResolved = (value) => value;
        }
        if (typeof onRejected !== 'function') {
            onRejected = (reason) => {
                throw reason;
            };
        }

        // 返回一个promise对象
        return new Promise((resolve, reject) => {
            function callback(type) {
                try {
                    // 获取then的回调函数的结果，作为返回的promise的结果值
                    let result = type(self.promiseResult);
                    if (result instanceof Promise) {
                        // 如果返回值是promise对象，
                        result.then(
                            (v) => {
                                resolve(v);
                            },
                            (r) => {
                                reject(r);
                            }
                        );
                    } else {
                        // 不过不是promise对象，调用成功的回调函数
                        resolve(result);
                    }
                } catch (error) {
                    reject(error);
                }
            }
            // 成功状态
            if (this.promiseStatus === 'fulfilled') {
                console.log('then方法_成功状态');
                setTimeout(() => {
                    callback(onResolved);
                });
            }

            // 错误状态
            if (this.promiseStatus === 'rejected') {
                console.log('then方法_错误状态');
                setTimeout(() => {
                    callback(onRejected);
                });
            }

            // pending状态处理
            if (this.promiseStatus === 'pending') {
                console.log('then方法_pending状态');
                // 保存当前的回调函数
                this.callback.push({
                    onResolved: function () {
                        callback(onResolved);
                    },
                    onRejected: function () {
                        callback(onRejected);
                    },
                });
            }
        });
    }

    // catch
    catch(onRejected) {
        return this.then(undefined, onRejected);
    }
    //添加resolve方法
    resolve(value) {
        // 返回一个promise对象
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                // 返回promise对象的处理结果
                value.then(
                    (v) => {
                        resolve(v);
                    },
                    (r) => {
                        reject(r);
                    }
                );
            } else {
                resolve(value);
            }
        });
    }

    /**
     * 添加reject方法 ,类的方法，不是实例方法
     * @param {*} value
     * @returns
     */
    static reject(reason) {
        // 返回一个promise对象
        return new Promise((resolve, reject) => {
            reject(reason);
        });
    }

    /**
     * all 方法 只要一个失败则返回失败的promise值，都成功返回所有promise成功值的数组
     * @param {*} promises  promises数组
     */
    static all(promises) {
        // 计数count
        let count = 0;
        // 成功返回的数据
        let arr = [];

        // 返回一个promise对象
        return new Promise((resolve, reject) => {
            // 遍历promise对象
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(
                    (v) => {
                        // 每个promise对象都是成功，才可以返回
                        count++;
                        arr[i] = v;
                        if (count === promises.length) {
                            resolve(arr);
                        }
                    },
                    (r) => {
                        // 只要有一个对象失败，直接返回失败。修改状态
                        reject(r);
                    }
                );
            }
        });
    }

    /**
     * race 方法 返回最先执行的promise的值
     * @param {*} promises  promises数组
     */
    static all(promises) {
        // 返回一个promise对象
        return new Promise((resolve, reject) => {
            // 遍历promise对象
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(
                    (v) => {
                        resolve(arr);
                    },
                    (r) => {
                        reject(r);
                    }
                );
            }
        });
    }
}