面试准备之自定义手写promise

1.定义整体结构

// 自定义Promise函数模块
(function (window) {
    /*  
        promise 构造函数
        excutor 执行器函数(同步执行)
    */

    function Promise(excutor) {

    }

    /*  
        Promise的原型对象then()
        指定成功/失败的回调函数，返回一个新的promise对象
    */

    Promise.prototype.then = function (onResolved, onRejectd) {

    }

    /*  
        Promise的原型对象catch()
        指定失败的回调函数，返回一个新的promise对象
    */

    Promise.prototype.catch = function (onRejectd) {

    }

    /*  
        Promise函数对象的resolve方法
        返回一个指定结果的成功的promise
    */

    Promise.resolve = function (value) {

    }

    /*  
        Promise函数对象的reject方法
        返回一个指定reason的失败的promise
    */

    Promise.reject = function (reason) {

    }

    /*
         Promise函数对象的all方法
         返回一个promise，只有当所有promise都成功时才成功，否则只要有一个失败就失败
    */
    Promise.all = function (promises) {

    }

    /*
         Promise函数对象的race方法
         返回一个promise，其结果由第一个完成的primise决定
    */

    Promise.race = function (promises) {

    }

    // 向外暴露Promise函数
    window.Promise = Promise;
})(window)

2.自定义promise构造器的实现

   /*  
        promise 构造函数
        excutor 执行器函数(同步执行)
    */
 function Promise(excutor) {
        const that = this
        that.status = ‘pending‘; //给promise对象指定status属性，初始值为pending
        that.data = undefined; //给promise对象指定一个用于存储结果数据的属性
        that.callbacks = []; //每个元素的结构 :{onResolved(){},onRejected(){}}
        function resolve(value) {
            // 如果当前状态不是pending，直接结束
            if (that.status != ‘pending‘) {
                return
            }
            // 将状态改为resolved
            that.status = ‘resolved‘;
            // 保存value数据
            that.data = value;
            // 如果有待执行的callback函数，立即异步执行回调函数onResolved
            if (that.callbacks.length > 0) {
                setTimeout(() => { //模拟异步 放入队列中执行所有成功的回调
                    that.callbacks.forEach(callbacksObj => {
                        callbacksObj.onResolved(value)
                    });
                })
            }
        }

        function reject(reason) {
            // 如果当前状态不是pending，直接结束
            if (that.status != ‘pending‘) {
                return
            }
            // 将状态改为rejected
            that.status = ‘rejected‘;
            // 保存value数据
            that.data = reason;
            // 如果有待执行的callback函数，立即异步执行回调函数onResolved
            if (that.callbacks.length > 0) {
                setTimeout(() => { //模拟异步 放入队列中执行所有成功的回调
                    that.callbacks.forEach(callbacksObj => {
                        callbacksObj.onRejected(reason)
                    });
                })
            }
        }

        // 立即执行excutor
        try{
            excutor(resolve,reject)
        }catch(error){//如果执行器抛出异常，promise对象变为rejected状态
            reject(error)
        }
        
    }

3.promise.then方法的实现

  /*  
        Promise的原型对象then()
        指定成功/失败的回调函数，返回一个新的promise对象
    */

    Promise.prototype.then = function (onResolved, onRejected) {
        // 向后传递成功的value
        onRejected = typeof onResolved === ‘function‘ ? onResolved : value =>value
        // 指定默认的失败的回调(实现错误/异常穿透的关键点)  向后传递失败的reason
        onRejected = typeof onRejected === ‘function‘ ? onRejected : reason =>{throw reason}
        const that = this;
        //返回一个新的promise对象
        return new Promise((resolve, reject) => {
            // 调用指定的回调函数处理，根据执行的结果改变return的promise状态
            function hanle(callback) {
                /*
                    1.如果抛出异常，return的promise就会失败，reason就是error
                    2.如果回调函数返回的不是promise，return的promise就会成功，value就是返回的值
                    3.如果回调函数返回的是promise，return的promise的结果就是这个promise的结果
                */
                try {
                    const result = callback(that.data)
                    if (result instanceof Promise) {
                        // 3.如果回调函数返回的是promise，return的promise的结果就是这个promise的结果
                        result.then(
                            value => resolve(value), // 当result成功时，让return的promise也成功
                            reason => reject(reason) // 当result失败时，让return的promise也失败
                        )
                        // 简单最优化的写法
                        // result.then(resolve,reject)
                    } else {
                        // 2.如果回调函数返回的不是promise，return的promise就会成功，value就是返回的值
                        resolve(result)
                    }
                } catch (error) {
                    // 1.如果抛出异常，return的promise就会失败，reason就是error
                    reject(error)
                }

            }
            // 当前状态是pending状态，讲回调函数保存起来
            if (that.status === PENDING) {
                // 假设当前状态是PENDING状态，将回调函数保存起来
                this.callbacks.push({
                    onResolved(value) {
                        hanle(onResolved)
                    },
                    onRejected(reason) {
                        hanle(onRejected)
                    }
                })
            } else if (that.status === RESOLVED) {
                // 如果当前是resolved状态，异步执行resolved并改变return的promise状态
                setTimeout(() => {
                    hanle(onResolved)
                })
            } else { //如果当前是rejected状态，异步执行rejected并改变return的promise状态
                setTimeout(() => {
                    hanle(onRejected)
                })
            }
        })

    }

面试准备之自定义手写promise

原文：https://www.cnblogs.com/loveliang/p/13937814.html