ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

自定义封装Promise

2021-05-21 16:36:28  阅读:137  来源: 互联网

标签:function resolve 封装 自定义 self reason Promise reject


// 构造函数
function Promise(executor){
    this.promiseState = 'pending'// 状态
    this.promiseResult = undefined// 结果
    this.callbacks = []// 指定多个回调函数
    const self = this

    function resolve(data){
        // 状态只能改变一次
        if(self.promiseState!=='pending') return 

        // 修改状态
        self.promiseState = 'fullfilled'//或者resolved
        self.promiseResult = data

        // 改变状态之后调用回调函数
        self.callbacks.forEach(callback=>{
            callback.onResolved(data)
        })
    }

    function reject(data){
        // 状态只能改变一次
        if(self.promiseState!=='pending') return 

        // 修改状态
        self.promiseState = 'rejected'
        self.promiseResult = data

    // 改变状态之后调用回调函数
        self.callbacks.forEach(callback=>{
            callback.onRejected(data)
        })
    }

    // 同步调用执行器函数
    try{
        executor(resolve, reject)
    }catch(e){
        reject(e)
    }
    
}


// 原型链添加then方法
Promise.prototype.then = function(onResolved, onRejected){
    // catch穿透
    if(typeof onRejected!=='function') onRejected = reason=>{throw reason}
    if(typeof onResolved!=='function') onResolved = value=>value

    const self = this
    // 连续then回调
    return new Promise((resolve, reject)=>{
        function callback(func){
            try{
                let result = func(self.promiseResult)
                if(result instanceof Promise){
                    result.then(value=>resolve(value), reason=>reject(reason))
                }else{
                    resolve(result)
                }
            }catch(e){
                reject(e)
            }
        }

        switch(this.promiseState){
            case 'fullfilled':
               callback(onResolved, self.promiseResult)
               break
            case 'rejected':
                callback(onRejected, self.promiseResult)
                break  
            default:
                this.callbacks.push(
                    {
                        onResolved: function(){
                            callback(onResolved, self.promiseResult)
                        },
                         onRejected: function(){
                            callback(onRejected, self.promiseResult)
                         }
                    }
                )
                break
        }
    })  
}

// 添加catch方法
Promise.prototype.catch = function(onRejected){
    this.then(undefined, onRejected)
}

// 添加Promise.resolve()方法
Promise.resolve = function(result){
    return new Promise((resolve, reject)=>{
        if(result instanceof Promise){
            result.then(value=>resolve(value), reason=>reject(reason))
        }else{
            reject(result)
        }
    })
}

// 添加Promise.reject()方法
Promise.reject = function(reason){
    return new Promise((_, reject)=>{
        reject(reason)
    })
}

// 添加Promise.all()方法
Promise.all = function(promises){
    return new Promise((resolve, reject)=>{
        let arr = []
        for(let i=0;i<promises.length;i++){
            promises[i].then(
                value=>{
                    arr[i] = value
                },
                reason=>{
                    reject(reason)
                }
            )
        }
        resolve(arr)
    })
}

标签:function,resolve,封装,自定义,self,reason,Promise,reject
来源: https://www.cnblogs.com/pangqianjin/p/14794311.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有