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)
                })
            }
        })
    }
}