标签：MyPromise 面试题 resolve err res JS --- promise reject

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

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

标签：MyPromise,面试题,resolve,err,res,JS,---,promise,reject
来源： https://www.cnblogs.com/lvhanghmm/p/14915169.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。