今日练习：手写Promise及其API

手写Promise及其API

Promise构造函数

// promise的构造函数，同步执行
// executor===(resolve,reject)=>{}
function Promise(executor){
    // Promise的内置属性 PromiseState与PromiseResult的初始化
    this.PromiseState = 'pending'
    this.PromiseResult = null
    const self = this
    // 缓存then的回调函数，用于异步执行
    this.callback = []
    function resolve(data){
        if(self.PromiseState !== 'pending') return
        self.PromiseState = 'fulfilled'
        self.PromiseResult = data
        // 因为then的执行是异步的
        setTimeout(()=>{
        self.callback.forEach(item => {
            item.resolved(data)
        });
        }) 
    }
    function reject(data){
        if(self.PromiseState !== 'pending') return
        self.PromiseState = 'rejected'
        self.PromiseResult = data
        // 因为then的执行是异步的
        setTimeout(()=>{
            self.callback.forEach(item => {
                item.rejected(data)
            });
        })
    }
    // 立即执行传入Promise里的执行器函数
    try {
        executor(resolve,reject)
    } catch (e) {
        reject(e)
    }
}

实例方法then

//实例方法 接收两个回调函数，成功的回调和失败的回调
Promise.prototype.then = function(resolved,rejected){
    const self = this
    if(typeof resolved !== 'function'){
        resolved =function( value ) {return value}
    }
    if(typeof rejected !== 'function'){
        rejected = function( reason ) {throw reason}
    }
    return new Promise((resolve,reject)=>{
        function callbackFn(type){
            try {
             let value = type(self.PromiseResult)
            if(value instanceof Promise){
                value.then(v=>{
                    resolve(v)
                },r=>{
                    reject(r)
                })
            }else{
                resolve(value)
            }
            } catch (e) {
               reject(e) 
            }
        }
        if(this.PromiseState=='pending'){
            this.callback.push({resolved:function(){callbackFn(resolved)},rejected:function(){callbackFn(rejected)}})
        }
        if(this.PromiseState=='fulfilled'){
            setTimeout(()=>{
                callbackFn(resolved)
            })
        }
        if(this.PromiseState=='rejected'){
            setTimeout(()=>{
                callbackFn(rejected)
            })
        }
    })
}

实例方法catch

//实例方法 接受一个失败的回调函数
Promise.prototype.catch = function(rejected){
    this.then(undefined,rejected)
}

静态方法resolve

// 静态方法 返回值为一个Promise实例
Promise.resolve = function(value){
    return new Promise((resolve,reject)=>{
        if(value instanceof Promise){
            value.then(v=>{
                resolve(v)
            },r=>{
                reject(r)
            })
        }else{
            resolve(value)
        }
    })
}

静态方法reject

// 静态方法 返回值为一个Promise实例
Promise.reject = function(reason){
    return new Promise((resolve,reject)=>{
        reject(reason)
    })
}

静态方法all

// 静态方法 接受一个由promise组成的数组 返回值为一个Promise实例 若成功则结果值为一个Pormise,这个promise的结果值为一个数组,存放的为每个promise实例的成功的结果值,若失败则返回为最先失败的那个Promise实例
Promise.all = function(PromiseArr){
    let count = 0;
    let arr = []
    return new Promise((resolve,reject)=>{
        for(let i = 0;i<PromiseArr.length;i++){
            PromiseArr[i].then(v=>{
                count++
                arr[i] = v
                if(count === PromiseArr.length){
                    resolve(arr)
                }
            },r=>{
                reject(r)
            })
        }
    })
}

静态方法race

// 静态方法 接受一个由promise组成的数组 返回结果为最先改变状态的promise
Promise.race = function(PromiseArr){
    return new Promise((resolve,reject)=>{
        for(let i = 0;i<PromiseArr.length;i++){
            PromiseArr[i].then(v=>{
                resolve(v)
            },r=>{
                reject(r)
            })
        }
    })
}

使用es6的class实现Promise

class Promise{
    constructor(executor){
        this.PromiseState = 'pending'
        this.PromiseResult = null
        const self = this
        this.callback = []
        function resolve(data){
            if(self.PromiseState !== 'pending') return
            self.PromiseState = 'fulfilled'
            self.PromiseResult = data
            setTimeout(()=>{
            self.callback.forEach(item => {
                item.resolved(data)
            });
            }) 
        }
        function reject(data){
            if(self.PromiseState !== 'pending') return
            self.PromiseState = 'rejected'
            self.PromiseResult = data
            setTimeout(()=>{
                self.callback.forEach(item => {
                    item.rejected(data)
                });
            })
            
        }
        try {
            executor(resolve,reject)
        } catch (e) {
            reject(e)
        }
    }
    then(resolved,rejected){
        const self = this
        if(typeof resolved !== 'function'){
            resolved =function( value ) {return value}
        }
        if(typeof rejected !== 'function'){
            rejected = function( reason ) {throw reason}
        }
        return new Promise((resolve,reject)=>{
            function callbackFn(type){
                try {
                 let value = type(self.PromiseResult)
                if(value instanceof Promise){
                    value.then(v=>{
                        resolve(v)
                    },r=>{
                        reject(r)
                    })
                }else{
                    resolve(value)
                }
                } catch (e) {
                   reject(e) 
                }
            }
            if(this.PromiseState=='pending'){
                this.callback.push({resolved:function(){callbackFn(resolved)},rejected:function(){callbackFn(rejected)}})
            }
            if(this.PromiseState=='fulfilled'){
                setTimeout(()=>{
                    callbackFn(resolved)
                })
            }
            if(this.PromiseState=='rejected'){
                setTimeout(()=>{
                    callbackFn(rejected)
                })
            }
        })
    }
    catch(rejected){
        this.then(undefined,rejected)
    }
    static resolve(value){
        return new Promise((resolve,reject)=>{
            if(value instanceof Promise){
                value.then(v=>{
                    resolve(v)
                },r=>{
                    reject(r)
                })
            }else{
                resolve(value)
            }
        })
    }
    static reject(reason){
        return new Promise((resolve,reject)=>{
            reject(reason)
        })
    }
    static all(PromiseArr){
        let count = 0;
        let arr = []
        return new Promise((resolve,reject)=>{
            for(let i = 0;i<PromiseArr.length;i++){
                PromiseArr[i].then(v=>{
                    count++
                    arr[i] = v
                    if(count === PromiseArr.length){
                        resolve(arr)
                    }
                },r=>{
                    reject(r)
                })
            }
        })
    }
    static race(PromiseArr){
        return new Promise((resolve,reject)=>{
            for(let i = 0;i<PromiseArr.length;i++){
                PromiseArr[i].then(v=>{
                    resolve(v)
                },r=>{
                    reject(r)
                })
            }
        })
    }
}