手写promise class类封装promise

先写class类构造函数,接着实例化对象出来,传入resolve, reject形参,在构造函数中try cactch,验证是否传入的是否是函数,定义默认状态,根据条件变成成功或失败,此时架子已经搭好,但无法异步通讯,定义两个数组,在失败和成功函数中循环它并将其返回出去,为什么是数组?答:因为还有promise.all promise.race 等其他方法,方便封装传值! 感谢阅读到此

 <!-- class类封装promise -->
    <script>
        class MyPromise {
            constructor(fn) {
                // 尝试执行接收的函数 如果没有函数则抛出错误
                this.state = 'pending' // 表示进行中
                this.value = ''
                this.failed = [] // 这个数组用来收集promise执行失败时的函数
                this.success = [] // 这个数组用来收集promise执行成功的函数
                let resolve = (res) => {
                    if (this.state === 'pending') {
                        this.state = 'fulfilled' // 表示promise执行成功
                        this.value = res
                        this.success.forEach(item => {
                            item(res)
                        })
                    }
                }
                let reject = (err) => {
                    if (this.state === 'pending') {
                        this.state = 'rejected'
                        this.value = err
                        this.failed.forEach(item => {
                            item(err)
                        })
                    }
                }
                try {
                    fn(resolve, reject)
                } catch (err) {
                    throw new Error(err)
                }
            }

            then(success, failed) {
                this.success.push(success)
                this.failed.push(failed)
            }
        }



        let promise = new MyPromise(function(resolve, reject) {
            // resolve(1)
            setTimeout(() => {
                // reject('promise执行失败了')
                resolve('这是异步操作执行成功后的数据')
            }, 3000);

        });
        // console.log(promise);
        promise.then(res => {
            console.log(res);
        }, err => {
            console.log(err);
        })
    </script>

说一下Promise.race和 Promise.all

Promise.race :可以接收多个promise作为参数 当其中一个promise率先发生变化后就会执行的逻辑 (race追赶的意思)

Promise.all:可以接收多个promise作为参数 当所有的promise都执行结束后会返回结果

 let promise1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(5)
            }, 2000)
        })

        let promise2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(6)
            }, 1000)
        })

        // 可以接收多个promise作为参数 当所有的promise都执行结束后会返回结果
        // Promise.all([promise1, promise2]).then((res) => {
        //     let num = res[0] + res[1]
        //     console.log(num);
        // });
        // 可以接收多个promise作为参数 当其中一个promise率先发生变化后就会执行的逻辑 race追赶的意思
        Promise.race([promise1, promise2]).then(res => {
            console.log(res);
        })

完!

  努力学好全栈,更上一层时刻保持谦逊,处事低调,为人谦和...