zoukankan      html  css  js  c++  java
  • 自定义封装Promise

    // 构造函数
    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)
        })
    }
    
  • 相关阅读:
    坑爹的微信支付v3,其实没有那么坑
    Mysql探究之null与not null
    Mysql的空值与NULL的区别
    Java编程思想(第4版) 中文清晰PDF完整版
    URI和URL的区别
    html 文本输入框效果大汇集
    HTTP状态码大全
    Silverlight ModelView中调用UI进程
    appium部分api
    appium元素定位
  • 原文地址:https://www.cnblogs.com/pangqianjin/p/14794311.html
Copyright © 2011-2022 走看看