JS手写面试题 --- Promise 以及相关方法的实现

Posted 2021-06-21 lvhanghmm

JS手写面试题 --- Promise 以及相关方法的实现

题目描述: 手写 Promise 以及 Promise.all Promise.race 的实现

实现代码如下:

    class MyPromise {
        constructor(fn) {
            // 表示状态
            this.state = "pendings";
            // 表示 then 注册的成功函数
            this.successFun = [];
            // 表示 then 注册失败的函数
            this.failFun = [];

            let resolve = (val) => {
                // 保持状态改变不可变（resolve 和 reject 只准触发一种）
                if (this.state !== "pending") return;

                // 成功触发时机 改变状态 同时执行在 then 注册的回调事件
                this.state = "success";
                // 为了保证 then 事件先注册（主要是考虑在 promise 里面同步代码
                // promise 规范 这里为模拟异步
                setTimeout(() => {
                    // 执行当前事件里面的所有注册函数
                    this.successFun.forEach((item) => item.call(this, val));
                });
            };

            let reject = (err) => {
                if (this.state !== "pending") return;
                // 失败触发时机  改变状态 同时执行在 then 注册的回调事件
                this.state = "fail";
                // 为了保证 then 事件先注册 （主要是考虑在promise里面写同步代码） promise规范 这里模拟异步
                setTimeout(() => {
                    this.failFun.forEach((item) => item.call(this, err));
                });
            };

            // 调用函数
            try {
                fn(resolve, reject);
            } catch (e) {
                reject(e);
            }
        }

        // 实例方法 then

        then(resolveCallback, rejectCallback) {
            // 判断回调是否为函数
            resolveCallback =
                typeof resolveCallback !== "function" ?
                    (v) => v : resolveCallback;
            rejectCallback =
                typeof rejectCallback !== "function"
            ? (err) => {
                throw err;
                    }
                    : rejectCallback;
            // 为了保持链式调用 继续返回 promise
            return new MyPromise((resolve, reject) => {
                // 将回调注册到 successFun 事件集合到里面去
                this.successFun.push((val) => {
                    try {
                        // 执行回调函数
                        let x = resolveCallback(val);
                        //最难的一点
                        // 如果回调函数是普通值 那么就 resolve 出去给下一个 then
                        // 链式调用 如果是一个 promise 对象 （代表又是一个异步）
                        // 那么就调用 x 的 then 方法 将 resolve 和 reject 传进去
                        // 等到 x 内部的异步
                        // 执行完毕的时候（状态完成）
                        // 就会自动执行传入的 resolve
                        // 这样就控制了链式调用的顺序了！
                        x instanceof MyPromise ? x.then(resolve, reject) : resolve(x);
                    } catch (e) {
                        reject(e);
                    }
                });

                this.failFun.push((val) => {
                    try {
                        // 执行回调函数
                        let x = rejectCallback(val);
                        x instanceof MyPromise ?
                            x.then(resolve, reject) : reject(x);
                    } catch (e) {
                        reject(e);
                    }
                });
            });
        }

        // 静态方法
        static all(promiseArr) {
            let result = [];
            // 声明一个计数器 每一个 promise 返回就加 1
            let count = 0;
            return new MyPromise((resolve, reject) => {
                for (let i = 0; i < promiseArr.length; i++) {
                    // 这里使用 promise.resolve 包装一下 防止不是 promise 类型传进来！
                    Promise.resolve(promiseArr[i],then(
                        (res) => {
                        // 这里不能直接 push 数组 因为要控制顺序一一对应（原作者之前犯了这个错误）
                        result[i] = res;
                        count++;
                        // 只有全部的 promise 执行成功之后才 resolve 出去
                        if (count === promiseArr.length) {
                            resolve(result);
                        }
                    },
                        (err) => {
                            reject(err);
                        }
                    )
                  );
                }
            });
        }

        // 静态方法
        static race(promiseArr) {
            return new MyPromise((resolve, reject) => {
                for (let i = 0; i < promiseArr.length; i++) {
                    Promise.resolve(promiseArr[i].then(
                        (res) => {
                            // promise 数组只要在任何一个 promise 状态变更 就可以返回
                            resolve(res);
                        },
                        (err) => {
                            reject(err);
                        }
                    ));
                }
            });
        }
    }

    // 使用
    let promise1 = new MyPromise((resolve, reject) => {
        setTimeout(() => {
            resolve(123);
        }, 2000);
    });

    let promise2 = new MyPromise((resolve, reject) => {
        setTimeout(() => {
            resolve(1234);
        }, 1000);
    });

    MyPromise.all([promise1, promise2]).then(res => {
        console.log(res);
    })

    MyPromise.race([promise1, promise2]).then(res => {
        console.log(res);
    })

    promise1.then(
        res =>{
            console.log(res); // 过两秒输出 123
            return new MyPromise((resolve, reject) => {
                setTimeout(() => {
                    resolve("success");
                }, 1000);
            });
        },
        err => {
            console.log(err);
        }
    )
    .then(
        res => {
            console.log(res); // 再过一秒输出 success
        },
        err => {
            console.log(err);
        }
    );

好难！一个一个敲下来的！没有经过测试！慎用！