自定义Promise(二)-- .then/.catch

发布日期:2021-08-04 阅读量:861

1. 实现.then方法

   1).then方法为一个原型方法;

   2).then方法有两个回调函数参数onResolved和onRjected;

   3)返回值为一个新的promise对象,该promise对象的返回取决于回调函数的返回;

   4)处理参数(异常穿透):

       当onResolved/onRejected为一个函数时,则正常执行,若不是,则onResolved直接返回结果值,onRejected抛出异常。

   5)分别处理不同status下的情况:

       (1)status === 'pending' 时会将两个回调函数(函数内容同(2))存储进Promise的callbacks属性,等promise结果出来后调用;

       (2)status === 'resolved'时,判断:

           ①当回调抛出异常,return 的 promise走失败,返回reason也就是error;

           ②当回调函数返回的不是promise,return的promise是成功,value就是返回值;

           ③当回调函数返回的是promise,return的结果就是回调函数的返回结果。

       (3)status === 'rejected'时,判断:同(2)

    /*
     * @param onResolved 成功回调函数
     * @param onRejected 失败回调函数
     * @return new Promise
     */
    Promise.prototype.then = function (onResolved, onRejected) {
        //异常穿透处理
        onResolved = typeof onResolved === 'function'? onResolved: value => value;
        onRejected = typeof onRejected === 'function'? onRejected: reason => { throw reason };
        
        var self = this;
      
        return new Promise((resolve, reject) => {
            /**
             * 5)下面(1)(2)(3)公共处理逻辑
             * @param {onResolved, onRejected} cb 回调函数
             */
            function handle(cb) {
                var result = cb(self.data);
                try{
                    // 当回调函数返回的是promise,return的结果就是回调函数的返回结果
                    if (result instanceof Promise) {
                        result.then(
                            value => resolve(value),
                            reason => reject(reason)
                        )
                    } else {
                        resolve(result)
                    }
                }catch(error){
                    //当回调抛出异常,return 的 promise走失败,返回reason也就是error;
                    reject(error);
                }
            }
            if (self.status === 'pending') { // pending状态,将回调函数存储
                self.callbacks.push({
                    onResolved(value) {
                            handle(onResolved)
                    },
                    onRejected(reaseon) {
                        handle(onRejected)
                    }
                })
            } else if (self.status === 'resolved') { // resolved状态,异步执行onResolved并改变return的promise状态
                setTimeout(() => {
                    handle(onResolved)
                })
            } else {
                setTimeout(() => { // rejected状态,异步执行onRejected并改变return的promise状态
                    handle(onRejected)
            })
        })
    }

2. 实现.catch方法

    /**
     * Promise原型对象方法catch()
     * @param onRejected 失败回调方法
     * @return new Promise
     */
     Promise.prototype.catch = function(onRejected){
        return  this.then(undefined, onRejected)
     }