关于promise:Promise

Promise 理解

// Promise 承受的参数是函数模式的
// resolve(解决)  函数类型的参数 
// reject(回绝)   函数类型的参数
const p = new Promise((resolve,reject) => {let num = Math.round((Math.random() * 100))
    if(num > 50) {resolve(num) // 能够将 Promise 对象（下面的 p）的状态设置为胜利
    }else {reject(num) // 能够将 Promise 对象（下面的 p）的状态设置为失败
    }
})

p.then((num) => {console.log('胜利了',num)
    // 如何中断 Peomise
    // return new Promise(() => {)
},(num) => {console.log('失败了',num)
})

// console.log(p) 会有一个 Promise 实例，下面有两个属性
PromiseState
1. pending  未决定的
2. rejected  失败
3. resolve/fulfilled  胜利

PromiseResult
保留着对象胜利或者失败的后果
只有以下两个能够操作这个后果
1. resolve
2. reject

手写 Promise 代码

function Promise(excutor) {
    // 增加两个默认属性
    this.PromiseState = 'pending'
    this.PromiseResult = null

    // 定义一个回调应用
    this.callbacks = []

    // 函数外面的 this 指向 window，所以保留下
    const that = this;

    // resolve 函数
    function resolve(data) {
        // PromiseState 只能批改一次，不是 pending 状态间接 retrun
        if(that.PromiseState !== 'pending') return
        // 1. 批改对象的状态（PromiseState）that.PromiseState = 'fulfilled'
        // 2. 批改对象后果值（PromiseResult）that.PromiseResult = data
        // 调用胜利函数
        // 这个定时器为了体现异步
        setTimeout(() => {
            that.callbacks.forEach(element => {element.onResolved(data)
            });    
        })
    }
    // reject 函数
    function reject(data) {
        // PromiseState 只能批改一次，不是 pending 状态间接 retrun
        if(that.PromiseState !== 'pending') return
        // 1. 批改对象的状态（PromiseState）that.PromiseState = 'rejected'
        // 2. 批改对象后果值（PromiseResult）that.PromiseResult = data
        // 调用胜利函数
        // 这个定时器为了体现异步
        setTimeout(() => {    
            that.callbacks.forEach(element => {element.onRejected(data)
            });  
        })
    }
    // 兼容 throw 抛出异样
    try {
        // 同步调用《执行器函数》excutor(resolve,reject)
    }catch(err) {reject(err)
    }
}

// 增加 then 办法
Promise.prototype.then = function (onResolved,onRejected) {
    const that = this
    if(typeof onRejected !== 'function') {
        onRejected = error => {throw error}
    }
    if(typeof onResolved !== 'function') {onResolved = value => value}
    return new Promise((resolve,reject) => {
        // 封装函数
        function callback(type) {
            try{
                // 获取回调函数的执行后果
                let result = type(that.PromiseResult)
                // 判断以后数据是不是一个 Promise
                if(result instanceof Promise) {
                    // 如果是，那必定能够调用 then 办法
                    result.then((val) => {resolve(val)
                    },(err) => {reject(err)
                    })
                }else {
                    // 如果不是，间接返回后果即可
                    resolve(result)
                }
            }catch(err){reject(err)
            }
        }
        if(this.PromiseState === 'fulfilled') {
            // 这个定时器为了体现异步
            setTimeout(() => {callback(onResolved)
            })
        }
        if(this.PromiseState === 'rejected') {
            // 这个定时器为了体现异步
            setTimeout(() => {callback(onRejected)
            })
        }
        if(this.PromiseState === 'pending') {
            this.callbacks.push({onResolved: function() {callback(onResolved)
                },
                onRejected: function() {callback(onRejected)
                }
            })
        }
    })
}

Promise.prototype.catch = function(onRejected) {return this.then(undefined,onRejected)
}

Promise.resolve = function(value) {return new Promise((resolve,reject) => {if(value instanceof Promise) {
            // 如果是，那必定能够调用 then 办法
            value.then((val) => {resolve(val)
            },(err) => {reject(err)
            })
        }else {
            // 如果不是，间接返回后果即可
            resolve(value)
        }
    })
}

Promise.reject = function(error) {return new Promise((resolve,reject) => {reject(error)
    })
}

Promise.all = function(promises) {return new Promise((resolve,reject) => {
        // 申明一个变量来判断数组中是不是都执行胜利了
        let count = 0
        let arr = []
        for(let i = 0;i < promises.length;i++) {promises[i].then(val => {
                count++;
                arr[i] = val
                // 当所有都执行成了，就返回胜利
                if(count === promises.length){resolve(arr)
                }
            },err => {reject(err)
            })
        }
    })
}

Promise.race = function(promises) {return new Promise((resolve,reject) => {
        // 申明一个变量来判断数组中是不是都执行胜利了
        for(let i = 0;i < promises.length;i++) {promises[i].then(val => {resolve(val)
            },err => {reject(err)
            })
        }
    })
}

手写 Promise 代码 -Class 版本

class Promise {
    // 构造方法
    constructor(excutor) {
        // 增加两个默认属性
        this.PromiseState = 'pending'
        this.PromiseResult = null

        // 定义一个回调应用
        this.callbacks = []

        // 函数外面的 this 指向 window，所以保留下
        const that = this;

        // resolve 函数
        function resolve(data) {
            // PromiseState 只能批改一次，不是 pending 状态间接 retrun
            if(that.PromiseState !== 'pending') return
            // 1. 批改对象的状态（PromiseState）that.PromiseState = 'fulfilled'
            // 2. 批改对象后果值（PromiseResult）that.PromiseResult = data
            // 调用胜利函数
            // 这个定时器为了体现异步
            setTimeout(() => {
                that.callbacks.forEach(element => {element.onResolved(data)
                });    
            })
        }
        // reject 函数
        function reject(data) {
            // PromiseState 只能批改一次，不是 pending 状态间接 retrun
            if(that.PromiseState !== 'pending') return
            // 1. 批改对象的状态（PromiseState）that.PromiseState = 'rejected'
            // 2. 批改对象后果值（PromiseResult）that.PromiseResult = data
            // 调用胜利函数
            // 这个定时器为了体现异步
            setTimeout(() => {    
                that.callbacks.forEach(element => {element.onRejected(data)
                });  
            })
        }
        // 兼容 throw 抛出异样
        try {
            // 同步调用《执行器函数》excutor(resolve,reject)
        }catch(err) {reject(err)
        }
    }

    then(onResolved,onRejected) {
        const that = this
        if(typeof onRejected !== 'function') {
            onRejected = error => {throw error}
        }
        if(typeof onResolved !== 'function') {onResolved = value => value}
        return new Promise((resolve,reject) => {
            // 封装函数
            function callback(type) {
                try{
                    // 获取回调函数的执行后果
                    let result = type(that.PromiseResult)
                    // 判断以后数据是不是一个 Promise
                    if(result instanceof Promise) {
                        // 如果是，那必定能够调用 then 办法
                        result.then((val) => {resolve(val)
                        },(err) => {reject(err)
                        })
                    }else {
                        // 如果不是，间接返回后果即可
                        resolve(result)
                    }
                }catch(err){reject(err)
                }
            }
            if(this.PromiseState === 'fulfilled') {
                // 这个定时器为了体现异步
                setTimeout(() => {callback(onResolved)
                })
            }
            if(this.PromiseState === 'rejected') {
                // 这个定时器为了体现异步
                setTimeout(() => {callback(onRejected)
                })
            }
            if(this.PromiseState === 'pending') {
                this.callbacks.push({onResolved: function() {callback(onResolved)
                    },
                    onRejected: function() {callback(onRejected)
                    }
                })
            }
        })
    }

    catch(onResolved,onRejected) {return this.then(undefined,onRejected)
    }

    static resolve = function(value) {return new Promise((resolve,reject) => {if(value instanceof Promise) {
                // 如果是，那必定能够调用 then 办法
                value.then((val) => {resolve(val)
                },(err) => {reject(err)
                })
            }else {
                // 如果不是，间接返回后果即可
                resolve(value)
            }
        })
    }

    static reject (error) {return new Promise((resolve,reject) => {reject(error)
        })
    }

    static all (promises) {return new Promise((resolve,reject) => {
            // 申明一个变量来判断数组中是不是都执行胜利了
            let count = 0
            let arr = []
            for(let i = 0;i < promises.length;i++) {promises[i].then(val => {
                    count++;
                    arr[i] = val
                    // 当所有都执行成了，就返回胜利
                    if(count === promises.length){resolve(arr)
                    }
                },err => {reject(err)
                })
            }
        })
    }

    static race (promises) {return new Promise((resolve,reject) => {
            // 申明一个变量来判断数组中是不是都执行胜利了
            for(let i = 0;i < promises.length;i++) {promises[i].then(val => {resolve(val)
                },err => {reject(err)
                })
            }
        })
    }
}