手写实现简单promise

promise的回调执行关注以下两点

• 链式调用注意点：需要判断上一个then的回调的执行结果，也就是它返回的新的promise的状态。
• promise对象的then执行，其实，就是先执行then方法把回调函数存储起来，然后，执行器函数调用传入的resolve和reject函数时，改变了状态，执行相应状态的回调就行了。

手写promise，理解设计思想

 /*
        疑问：
            1.为啥调用then方法去改变状态?
            （哦！我知道了，因为x和包裹它的外面的promise2不是同一个实例，我们要改变的是promise2的状态）
            2. x.then(resolve, reject) 这里返回的promise实例状态为pending，应该为确定的一个状态
        */

        /*
        实现promise进度：
        4.实现无异步的fulfilled状态promise链式调用
        5.判断返回的promise是否为自己，then方法返回的promise，不能是then方法回调返回的promise
        */

        /*1.链式调用注意点：1.需要判断上一个then的回调的执行结果，也就是它返回的新的promise的状态
        2.promise对象的then执行，其实，就是先执行的then方法把回调函数存储起来，然后，执行器函数调用传入的resolve和reject函数，改变了状态，执行相应的
        回调就行了。
        */

        function resolvePromise(self, x, resolve, reject) {
            if (self === x) {
                throw new TypeError('Chaining cycle detected for promise #<Promise>')
            }
            if (x instanceof MyPromise) {
                // 改变的是promise2的状态
                x.then(resolve, reject)
            } else {
                resolve(x)
            }
        }

        class MyPromise {
            constructor(fn) { // 传入执行器函数后，立即执行。执行器函数接受两个参数哦
                try {
                    // 用箭头函数的好处就是不用bind(this)。
                    fn(this.resolve, this.reject);
                } catch (error) {
                    this.reject(error)
                }
            }

            status = 'pending' // promise对象默认为pending状态
            resolveParams = null // 成功的参数
            rejectParams = null // 失败的参数
            fulfilledFunCallBack = [] // 成功回调
            rejectedFunCallBack = [] // 失败回调

            then(fulfilledFun, rejectedFun) { // then方法做的事就是判断promise状态，决定执行哪个函数
                fulfilledFun = typeof fulfilledFun === 'function' ? fulfilledFun : val => val // 默认函数
                rejectedFun = typeof rejectedFun === 'function' ? rejectedFun : reason => { throw reason };
                const promise2 = new MyPromise((resolve, reject) => {
                    if (this.status === 'fulfilled') {
                        queueMicrotask(() => { // 在promise2实例化后，执行该微任务
                            try {
                                const x = fulfilledFun && fulfilledFun(...this.resolveParams)
                                resolvePromise(promise2, x, resolve, reject);
                            } catch (error) {
                                reject(error)
                            }
                        })
                    } else if (this.status === 'rejected') {
                        queueMicrotask(() => {
                            try {
                                const x = rejectedFun && rejectedFun(...this.rejectParams)
                                resolvePromise(promise2, x, resolve, reject);
                            } catch (error) {
                                reject(error)
                            }
                        })
                    } else if (this.status === 'pending') {
                        // 如果是pending，那么执行器函数中存在异步执行，存储回调
                        fulfilledFun && this.fulfilledFunCallBack.push(() => {
                            try {
                                const x = fulfilledFun && fulfilledFun(...this.resolveParams)
                                resolvePromise(promise2, x, resolve, reject);
                            } catch (error) {
                                reject(error)
                            }
                        })
                        rejectedFun && this.rejectedFunCallBack.push(() => {
                            try {
                                const x = rejectedFun && rejectedFun(...this.rejectParams)
                                resolvePromise(promise2, x, resolve, reject);
                            } catch (error) {
                                reject(error)
                            }
                        })
                    }
                })
                return promise2 // 返回的这个promise2一定要有确定的状态（即：需要主动变更promise状态）
            }

            resolve = (...arg) => { // 使用箭头函数
                if (this.status === 'pending') {
                    this.status = 'fulfilled'
                    this.resolveParams = arg
                    if (this.fulfilledFunCallBack.length) { // 异步执行
                        this.fulfilledFunCallBack.forEach(fn => {
                            fn(...this.resolveParams)
                        })
                        this.fulfilledFunCallBack = []
                    }
                }
            }

            reject = (...arg) => { // 使用箭头函数
                if (this.status === 'pending') {
                    this.status = 'rejected'
                    this.rejectParams = arg // 存储参数
                    if (this.rejectedFunCallBack.length) { // 异步执行
                        this.rejectedFunCallBack.forEach(fn => {
                            fn(...this.rejectParams)
                        })
                        this.rejectedFunCallBack = []
                    }
                }
            }

            // 静态方法
            static resolve = function (obj) {
                if (obj instanceof MyPromise) {
                    return obj
                }
                return new MyPromise((resolve) => resolve(obj))
            }

            static reject = function (obj) {
                return new MyPromise((resolve, reject) => reject(obj))
            }

        }