手撕Promise

1.Promise特点1

• 1.1 创建时必须传入一个函数, 否则会报错
• 1.2 会给传入的函数设置两个回调函数
• 1.3 刚创建的Promise对象状态是pending
• 1.4 状态一旦发生改变就不可再次改变
• 1.5 可以通过then来监听状态的改变
  • 1.5.1 如果添加监听时状态已经改变, 立即执行监听的回调
  • 1.5.2 如果添加监听时状态还未改变, 那么状态改变时候再执行监听回调
  • 1.5.3 同一个Promise对象可以添加多个then监听, 状态改变时所有的监听按照添加顺序执行

2.Promise特点2

• 1.1 then方法每次执行完毕都会返回一个新的Promise对象
• 1.2 上一个Promise对象的then可以给下一个Promise的then传递数据
  • 1.2.1 无论上一个是在成功的回调还是失败的回调传递的参数都会传递给下一个成功的回调
  • 1.2.2 如果上一个传递的是Promise对象, 那么传给下一个的成功还是失败由传递的Promise状态决定

3.Promise特点3

• 1.1 then方法返回的Promise对象的状态和前一个Promise的状态默认相同
• 1.2 后一个Promise对象的then可以捕获前一个Promise then的异常
• 1.3 catch方法就是then方法的语法糖 then(undefined, function(){});

4.Promise的all静态方法:

• 1.all方法接收一个数组,
• 2.如果数组中有多个Promise对象,只有都成功才会执行then方法,
  并且会按照添加的顺序, 将所有成功的结果重新打包到一个数组中返回给我们
• 3.如果数组中不是Promise对象, 那么会直接执行then方法

应用场景: 批量加载, 要么一起成功, 要么一起失败

5.Promise的race静态方法特点

• 1.1race方法会返回一个新的Promise对象
• 1.2谁先返回就听谁的

应用场景: 接口调试, 超时处理

        // 定义常量保存对象的状态
        const PENDING = 'pending'
        const FULFILLED = 'fulfilled'
        const REJECTED = 'rejected'
        class myPromise {
            constructor(handle) {
                // 0.初始化默认的状态
                this._status = PENDING
                // 定义变量保存存入的参数
                this.value = undefined
                this.reason = undefined
                // 定义变量保存监听的函数
                // this.onResolvedCallback = null
                // this.onRejectedCallback = null
                // 状态发生改变，有多个then方法调用
                this.onResolvedCallbacks = []
                this.onRejectedCallbacks = []
                // 1.判断是否传入了一个函数，如果没有传入就抛出异常
                if (!this._isFunction(handle)) {
                    throw new Error('请传入一个函数')
                }
                // 2.给传入的函数传递形参(传递两个函数)
                // _resolve调用的环境是window，如果需要修改myPromise内的内容需要修改this指向，否则会报错
                handle(this._resolve.bind(this), this._reject.bind(this))
            }
            catch(onRejected) {
                return this.then(undefined, onRejected)
            }
            _resolve(value) {
                // console.log('resolve');
                // 为了防止被重复修改
                if (this._status === PENDING) {
                    this._status = FULFILLED
                    this.value = value
                    // this.onResolvedCallback(this.value)
                    this.onResolvedCallbacks.forEach(fn => fn(this.value))
                }
            }
            _reject(reason) {
                // console.log('reject');
                // 为了防止被重复修改
                if (this._status === PENDING) {
                    this._status = REJECTED
                    this.reason = reason
                    // this.onRejectedCallback(this.reason)
                    this.onRejectedCallbacks.forEach(fn => fn(this.reason))
                }
            }
            then(onResolved, onRejected) {
                return new myPromise((nextResolve, nextReject) => {
                    // 1.判断有没有传入成功的回调
                    if (this._isFunction(onResolved)) {
                        // 2.判断当前的状态是否是成功的状态
                        if (this._status === FULFILLED) {
                            try {
                                // onResolved(this.value)
                                // 拿到上一个promise成功回调执行的结果
                                let result = onResolved(this.value)
                                // 判断执行的结果是否是一个promise对象
                                if (result instanceof myPromise) {
                                    result.then(nextResolve, nextReject)
                                } else {
                                    // 将上一个promise成功回调执行的结果传递给下一个promise成功的回调
                                    nextResolve(result)
                                }
                            } catch (e) {
                                nextReject(e)
                            }
                        }
                    }
                    // 1.判断有没有传入失败的回调
                    // if (this._isFunction(onRejected)) { // 当then只传递一个参数，第二个参数无论有没有都要修改为相应的状态
                    // 2.判断当前的状态是否是失败的状态
                    try {
                        if (this._status === REJECTED) {
                            // onRejected(this.reason)
                            // 拿到上一个promise成功回调执行的结果
                            let result = onRejected(this.reason)
                            // 判断执行的结果是否是一个promise对象
                            if (result instanceof myPromise) {
                                result.then(nextResolve, nextReject)
                            } else if (result !== undefined) { // 下一个promise.then没有返回值，就不用传递给成功的回调，执行原本的状态的回调
                                nextResolve(result)
                            } else {
                                nextReject()
                            }
                        }
                    } catch (e) {
                        // 发生错误，把错误传给下一个promise错误的回调
                        nextReject(e)
                    }
                    // }
                    // 2.判断当前的状态是否是默认状态
                    if (this._status === PENDING) {
                        if (this._isFunction(onResolved)) {
                            // this.onResolvedCallback = onResolved
                            this.onResolvedCallbacks.push(() => {
                                // 拿到上一个promise成功回调执行的结果
                                let result = onResolved(this.value)
                                // 判断执行的结果是否是一个promise对象
                                if (result instanceof myPromise) {
                                    result.then(nextResolve, nextReject)
                                } else {
                                    // 将上一个promise成功回调执行的结果传递给下一个promise成功的回调
                                    nextResolve(result)
                                }
                            })
                        }
                        // if (this._isFunction(onRejected)) { // 当then只传递一个参数，第二个参数无论有没有都要修改为相应的状态
                        // this.onRejectedCallback = onRejected
                        this.onRejectedCallbacks.push(() => {
                            if (result instanceof myPromise) {
                                // 拿到上一个promise成功回调执行的结果
                                let result = onRejected(this.reason)
                                // 判断执行的结果是否是一个promise对象
                                result.then(nextResolve, nextReject)
                            } else if (result !== undefined) { // 下一个promise.then没有返回值，就不用传递给成功的回调，执行原本的状态的回调
                                nextResolve(result)
                            } else {
                                nextReject(result)
                            }
                        })
                        // }
                    }
                })
            }
            static all(list){
            return new MyPromise(function (resolve, reject) {
                let arr = [];
                let count = 0;
                for(let i = 0; i < list.length; i++){
                    let p = list[i];
                    p.then(function (value) {
                        arr.push(value);
                        count++;
                        // 所有promise都成功才可执行
                        if(list.length === count){
                            resolve(arr);
                        }
                    }).catch(function (e) {
                        reject(e);
                    });
                }
            });
        }
        static race(list){
            return new MyPromise(function (resolve, reject) {
                for(let p of list){
                    p.then(function (value) {
                    	// resolve一执行，状态改变， 状态一旦发生改变就不可再次改变
                    	resolve(value);
                    }).catch(function (e) {
                        reject(e);
                    });
                }
            })
        }
            // 判断传入的是否是函数
            _isFunction(fn) {
                return typeof fn === 'function'
            }
        }

---

学习笔记❥(^_-)