前端 手写promise

//14.promise实现
    //1.Promise 基本结构:
        //构造函数Promise必须接受一个函数作为参数,我们称该函数为handle,handle又包含resolve和reject两个参数,它们是两个函数。
        new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve('FULFILLED')
            }, 1000)
          })
            //定义一个判断一个变量是否为函数的方法,后面会用到
            const isFunction = variable => typeof variable === 'function'
        //首先,我们定义一个名为 MyPromise 的 Class,它接受一个函数 handle 作为参数
        class MyPromise {
            constructor (handle) {
              if (!isFunction(handle)) {
                throw new Error('MyPromise must accept a function as a parameter')
              }
            }
        }
        //2.Promise 状态和值
            //三种状态:Pending(进行中) / Fulfilled(已成功) / Rejected(已失败)
            //状态只能由 Pending 变为 Fulfilled 或由 Pending 变为 Rejected ,且状态改变之后不会在发生变化,会一直保持这个状态。
            //Promise的值是指状态改变时传递给回调函数的值
            //上文中handle函数包含 resolve 和 reject 两个参数,它们是两个函数,可以用于改变 Promise 的状态和传入 Promise 的值
            //resolve : 将Promise对象的状态从 Pending(进行中) 变为 Fulfilled(已成功)  //这里 resolve 传入的 "FULFILLED" 就是 Promise 的值
            //reject : 将Promise对象的状态从 Pending(进行中) 变为 Rejected(已失败)
    
            //为 MyPromise 添加状态属性和值
            //三种状态常量
            const PENDING = 'PENDING'
            const FULFILLED = 'FULFILLED'
            const REJECTED = 'REJECTED'
            //再为 MyPromise 添加状态和值,并添加状态改变的执行逻辑
            class MyPromise {
                constructor (handle) {
                  if (!isFunction(handle)) {
                    throw new Error('MyPromise must accept a function as a parameter')
                  }
                  // 添加状态
                  this._status = PENDING
                  // 添加状态
                  this._value = undefined
                  // 执行handle
                  try {
                    handle(this._resolve.bind(this), this._reject.bind(this)) 
                  } catch (err) {
                    this._reject(err)
                  }
                }
                // 添加resovle时执行的函数
                _resolve (val) {
                  if (this._status !== PENDING) return
                  this._status = FULFILLED
                  this._value = val
                }
                // 添加reject时执行的函数
                _reject (err) { 
                  if (this._status !== PENDING) return
                  this._status = REJECTED
                  this._value = err
                }
            }
            //3. Promise 的 then 方法
                //Promise 对象的 then 方法接受两个参数:promise.then(onFulfilled, onRejected)
                //onFulfilled 和 onRejected 都是可选参数。如果 onFulfilled 或 onRejected 不是函数,其必须被忽略
                //onFulfilled 特性:
                                //如果 onFulfilled 是函数,当 promise 状态变为成功时必须被调用,其第一个参数为 promise成功状态传入的值( resolve 执行时传入的值);
                                //在 promise 状态改变前其不可被调用;调用次数不可超过一次
                //onRejected 特性:
                                //如果 onRejected 是函数:当 promise状态变为失败时必须被调用,其第一个参数为 promise 失败状态传入的值( reject 执行时传入的值)
                                //在 promise 状态改变前其不可被调用;其调用次数不可超过一次
                //then 方法可以被同一个 promise 对象调用多次:
                                //当 promise 成功状态时,所有 onFulfilled 需按照其注册顺序依次回调;
                                //当 promise 失败状态时,所有 onRejected 需按照其注册顺序依次回调
                //then 方法必须返回一个新的 promise 对象,因此 promise 支持链式调用
                promise2 = promise1.then(onFulfilled, onRejected);
                promise1.then(onFulfilled1, onRejected1).then(onFulfilled2, onRejected2);
//Promise的执行规则,包括“值的传递”和“错误捕获”机制:
    //1.如果 onFulfilled 或者 onRejected 返回一个值 x ,则运行下面的 Promise 解决过程:[[Resolve]](promise2, x)
        //若 x 不为 Promise ,则使 x 直接作为新返回的 Promise 对象的值, 即新的onFulfilled 或者 onRejected 函数的参数.
        let promise1 = new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve()
            }, 1000)
          })
          promise2 = promise1.then(res => {
            // 返回一个普通值
            return '这里返回一个普通值'
          })
          promise2.then(res => {
            console.log(res) //1秒后打印出:这里返回一个普通值
          })
        //若 x 为 Promise ,这时后一个回调函数,就会等待该 Promise 对象(即 x )的状态发生变化,才会被调用,并且新的 Promise 状态和 x 的状态相同。
        let promise1 = new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve()
            }, 1000)
          })
          promise2 = promise1.then(res => {
            // 返回一个Promise对象
            return new Promise((resolve, reject) => {
              setTimeout(() => {
               resolve('这里返回一个Promise')
              }, 2000)
            })
          })
          promise2.then(res => {
            console.log(res) //3秒后打印出:这里返回一个Promise
          })
    //2、如果 onFulfilled 或者onRejected 抛出一个异常 e ,则 promise2 必须变为失败(Rejected),并返回失败的值 e
    let promise1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('success')
        }, 1000)
      })
      promise2 = promise1.then(res => {
        throw new Error('这里抛出一个异常e')
      })
      promise2.then(res => {
        console.log(res)
      }, err => {
        console.log(err) //1秒后打印出:这里抛出一个异常e
      })
    //3、如果onFulfilled 不是函数且 promise1 状态为成功(Fulfilled), promise2 必须变为成功(Fulfilled)并返回 promise1 成功的值,例如:
    let promise1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('success')
        }, 1000)
      })
      promise2 = promise1.then('这里的onFulfilled本来是一个函数,但现在不是')
      promise2.then(res => {
        console.log(res) // 1秒后打印出:success
      }, err => {
        console.log(err)
      })
      //4、如果 onRejected 不是函数且 promise1 状态为失败(Rejected),promise2必须变为失败(Rejected) 并返回 promise1 失败的值,例如:
      let promise1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('fail')
        }, 1000)
      })
      promise2 = promise1.then(res => res, '这里的onRejected本来是一个函数,但现在不是')
      promise2.then(res => {
        console.log(res)
      }, err => {
        console.log(err)  // 1秒后打印出:fail
      })

      
        //据上面的规则,我们来完善 MyPromise
            //修改 constructor : 增加执行队列;
                //由于 then 方法支持多次调用,我们可以维护两个数组,将每次 then 方法注册时的回调函数添加到数组中,等待执行
            constructor (handle) {
                if (!isFunction(handle)) {
                throw new Error('MyPromise must accept a function as a parameter')
                }
                // 添加状态
                this._status = PENDING
                // 添加状态
                this._value = undefined
                // 添加成功回调函数队列
                this._fulfilledQueues = []
                // 添加失败回调函数队列
                this._rejectedQueues = []
                // 执行handle
                try {
                handle(this._resolve.bind(this), this._reject.bind(this)) 
                } catch (err) {
                this._reject(err)
                }
            }
            // 添加then方法
            then (onFulfilled, onRejected) {
                const { _value, _status } = this
                switch (_status) {
                // 当状态为pending时,将then方法回调函数加入执行队列等待执行
                case PENDING:
                    this._fulfilledQueues.push(onFulfilled)
                    this._rejectedQueues.push(onRejected)
                    break
                // 当状态已经改变时,立即执行对应的回调函数
                case FULFILLED:
                    onFulfilled(_value)
                    break
                case REJECTED:
                    onRejected(_value)
                    break
                }
                // 返回一个新的Promise对象
                return new MyPromise((onFulfilledNext, onRejectedNext) => {
                })
            }

            //根据 then 方法的规则,返回的新的 Promise 对象的状态依赖于当前 then 方法回调函数执行的情况以及返回值,例如 then 的参数是否为一个函数、回调函数执行是否出错、返回值是否为 Promise 对象。
            //完善then方法
            then (onFulfilled, onRejected) {
                const { _value, _status } = this
                // 返回一个新的Promise对象
                return new MyPromise((onFulfilledNext, onRejectedNext) => {
                // 封装一个成功时执行的函数
                let fulfilled = value => {
                    try {
                    if (!isFunction(onFulfilled)) {
                        onFulfilledNext(value)
                    } else {
                        let res =  onFulfilled(value);
                        if (res instanceof MyPromise) {
                        // 如果当前回调函数返回MyPromise对象,必须等待其状态改变后在执行下一个回调
                        res.then(onFulfilledNext, onRejectedNext)
                        } else {
                        //否则会将返回结果直接作为参数,传入下一个then的回调函数,并立即执行下一个then的回调函数
                        onFulfilledNext(res)
                        }
                    }
                    } catch (err) {
                    // 如果函数执行出错,新的Promise对象的状态为失败
                    onRejectedNext(err)
                    }
                }
                // 封装一个失败时执行的函数
                let rejected = error => {
                    try {
                    if (!isFunction(onRejected)) {
                        onRejectedNext(error)
                    } else {
                        let res = onRejected(error);
                        if (res instanceof MyPromise) {
                            // 如果当前回调函数返回MyPromise对象,必须等待其状态改变后在执行下一个回调
                            res.then(onFulfilledNext, onRejectedNext)
                        } else {
                            //否则会将返回结果直接作为参数,传入下一个then的回调函数,并立即执行下一个then的回调函数
                            onFulfilledNext(res)
                        }
                    }
                    } catch (err) {
                    // 如果函数执行出错,新的Promise对象的状态为失败
                    onRejectedNext(err)
                    }
                }
                switch (_status) {
                    // 当状态为pending时,将then方法回调函数加入执行队列等待执行
                    case PENDING:
                    this._fulfilledQueues.push(fulfilled)
                    this._rejectedQueues.push(rejected)
                    break
                    // 当状态已经改变时,立即执行对应的回调函数
                    case FULFILLED:
                    fulfilled(_value)
                    break
                    case REJECTED:
                    rejected(_value)
                    break
                }
                })
            }
            //接着修改 _resolve 和 _reject :依次执行队列中的函数
            //当 resolve 或 reject 方法执行时,我们依次提取成功或失败任务队列当中的函数开始执行,并清空队列,从而实现 then 方法的多次调用
            // 添加resovle时执行的函数
            _resolve (val) {
                if (this._status !== PENDING) return
                // 依次执行成功队列中的函数,并清空队列
                const run = () => {
                this._status = FULFILLED
                this._value = val
                let cb;
                while (cb = this._fulfilledQueues.shift()) {
                    cb(val)
                }
                }
                // 为了支持同步的Promise,这里采用异步调用
                setTimeout(() => run(), 0)
            }
            // 添加reject时执行的函数
            _reject (err) { 
                if (this._status !== PENDING) return
                // 依次执行失败队列中的函数,并清空队列
                const run = () => {
                this._status = REJECTED
                this._value = err
                let cb;
                while (cb = this._rejectedQueues.shift()) {
                    cb(err)
                }
                }
                // 为了支持同步的Promise,这里采用异步调用
                setTimeout(run, 0)
            }
  
  
//特殊的情况,就是当 resolve 方法传入的参数为一个 Promise 对象时,则该 Promise 对象状态决定当前 Promise 对象的状态。例如:
    const p1 = new Promise(function (resolve, reject) {
        // ...
    });
    
    const p2 = new Promise(function (resolve, reject) {
        // ...
        resolve(p1);
    })
    //p1 和 p2 都是 Promise 的实例,但是 p2 的resolve方法将 p1 作为参数,即一个异步操作的结果是返回另一个异步操作。
    //这时 p1 的状态就会传递给 p2,也就是说,p1 的状态决定了 p2 的状态。如果 p1 的状态是Pending,那么 p2 的回调函数就会等待 p1 的状态改变;
    //如果 p1 的状态已经是 Fulfilled 或者 Rejected,那么 p2 的回调函数将会立刻执行。

//修改_resolve来支持这样的特性
    //添加resovle时执行的函数
    _resolve (val) {
        const run = () => {
        if (this._status !== PENDING) return
        // 依次执行成功队列中的函数,并清空队列
        const runFulfilled = (value) => {
            let cb;
            while (cb = this._fulfilledQueues.shift()) {
            cb(value)
            }
        }
        // 依次执行失败队列中的函数,并清空队列
        const runRejected = (error) => {
            let cb;
            while (cb = this._rejectedQueues.shift()) {
            cb(error)
            }
        }
        /* 如果resolve的参数为Promise对象,则必须等待该Promise对象状态改变后,
            当前Promsie的状态才会改变,且状态取决于参数Promsie对象的状态
        */
        if (val instanceof MyPromise) {
            val.then(value => {
            this._value = value
            this._status = FULFILLED
            runFulfilled(value)
            }, err => {
            this._value = err
            this._status = REJECTED
            runRejected(err)
            })
        } else {
            this._value = val
            this._status = FULFILLED
            runFulfilled(val)
        }
        }
        // 为了支持同步的Promise,这里采用异步调用
        setTimeout(run, 0)
    }
/*
-----------------------------------------------------------
----------------------完整promise----------------------------
------------------------------------------------------------
*/

  // 判断变量否为function
  const isFunction = variable => typeof variable === 'function'
  // 定义Promise的三种状态常量
  const PENDING = 'PENDING'
  const FULFILLED = 'FULFILLED'
  const REJECTED = 'REJECTED'

  class MyPromise {
    constructor (handle) {
      if (!isFunction(handle)) {
        throw new Error('MyPromise must accept a function as a parameter')
      }
      // 添加状态
      this._status = PENDING
      // 添加状态
      this._value = undefined
      // 添加成功回调函数队列
      this._fulfilledQueues = []
      // 添加失败回调函数队列
      this._rejectedQueues = []
      // 执行handle
      try {
        handle(this._resolve.bind(this), this._reject.bind(this)) 
      } catch (err) {
        this._reject(err)
      }
    }
    // 添加resovle时执行的函数
    _resolve (val) {
      const run = () => {
        if (this._status !== PENDING) return
        // 依次执行成功队列中的函数,并清空队列
        const runFulfilled = (value) => {
          let cb;
          while (cb = this._fulfilledQueues.shift()) {
            cb(value)
          }
        }
        // 依次执行失败队列中的函数,并清空队列
        const runRejected = (error) => {
          let cb;
          while (cb = this._rejectedQueues.shift()) {
            cb(error)
          }
        }
        /* 如果resolve的参数为Promise对象,则必须等待该Promise对象状态改变后,
          当前Promsie的状态才会改变,且状态取决于参数Promsie对象的状态
        */
        if (val instanceof MyPromise) {
          val.then(value => {
            this._value = value
            this._status = FULFILLED
            runFulfilled(value)
          }, err => {
            this._value = err
            this._status = REJECTED
            runRejected(err)
          })
        } else {
          this._value = val
          this._status = FULFILLED
          runFulfilled(val)
        }
      }
      // 为了支持同步的Promise,这里采用异步调用
      setTimeout(run, 0)
    }
    // 添加reject时执行的函数
    _reject (err) { 
      if (this._status !== PENDING) return
      // 依次执行失败队列中的函数,并清空队列
      const run = () => {
        this._status = REJECTED
        this._value = err
        let cb;
        while (cb = this._rejectedQueues.shift()) {
          cb(err)
        }
      }
      // 为了支持同步的Promise,这里采用异步调用
      setTimeout(run, 0)
    }
    // 添加then方法
    then (onFulfilled, onRejected) {
      const { _value, _status } = this
      // 返回一个新的Promise对象
      return new MyPromise((onFulfilledNext, onRejectedNext) => {
        // 封装一个成功时执行的函数
        let fulfilled = value => {
          try {
            if (!isFunction(onFulfilled)) {
              onFulfilledNext(value)
            } else {
              let res =  onFulfilled(value);
              if (res instanceof MyPromise) {
                // 如果当前回调函数返回MyPromise对象,必须等待其状态改变后在执行下一个回调
                res.then(onFulfilledNext, onRejectedNext)
              } else {
                //否则会将返回结果直接作为参数,传入下一个then的回调函数,并立即执行下一个then的回调函数
                onFulfilledNext(res)
              }
            }
          } catch (err) {
            // 如果函数执行出错,新的Promise对象的状态为失败
            onRejectedNext(err)
          }
        }
        // 封装一个失败时执行的函数
        let rejected = error => {
          try {
            if (!isFunction(onRejected)) {
              onRejectedNext(error)
            } else {
                let res = onRejected(error);
                if (res instanceof MyPromise) {
                  // 如果当前回调函数返回MyPromise对象,必须等待其状态改变后在执行下一个回调
                  res.then(onFulfilledNext, onRejectedNext)
                } else {
                  //否则会将返回结果直接作为参数,传入下一个then的回调函数,并立即执行下一个then的回调函数
                  onFulfilledNext(res)
                }
            }
          } catch (err) {
            // 如果函数执行出错,新的Promise对象的状态为失败
            onRejectedNext(err)
          }
        }
        switch (_status) {
          // 当状态为pending时,将then方法回调函数加入执行队列等待执行
          case PENDING:
            this._fulfilledQueues.push(fulfilled)
            this._rejectedQueues.push(rejected)
            break
          // 当状态已经改变时,立即执行对应的回调函数
          case FULFILLED:
            fulfilled(_value)
            break
          case REJECTED:
            rejected(_value)
            break
        }
      })
    }
    // 添加catch方法
    catch (onRejected) {
      return this.then(undefined, onRejected)
    }
    //----------------添加静态方法-----------------
    // 添加静态resolve方法
    static resolve (value) {
      // 如果参数是MyPromise实例,直接返回这个实例
      if (value instanceof MyPromise) return value
      return new MyPromise(resolve => resolve(value))
    }
    // 添加静态reject方法
    static reject (value) {
      return new MyPromise((resolve ,reject) => reject(value))
    }
    // 添加静态all方法
    static all (list) {
      return new MyPromise((resolve, reject) => {
        /**
         * 返回值的集合
         */
        let values = []
        let count = 0
        for (let [i, p] of list.entries()) {
          // 数组参数如果不是MyPromise实例,先调用MyPromise.resolve
          this.resolve(p).then(res => {
            values[i] = res
            count++
            // 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled
            if (count === list.length) resolve(values)
          }, err => {
            // 有一个被rejected时返回的MyPromise状态就变成rejected
            reject(err)
          })
        }
      })
    }
    // 添加静态race方法
    static race (list) {
      return new MyPromise((resolve, reject) => {
        for (let p of list) {
          // 只要有一个实例率先改变状态,新的MyPromise的状态就跟着改变
          this.resolve(p).then(res => {
            resolve(res)
          }, err => {
            reject(err)
          })
        }
      })
    }
    //finally 方法用于指定不管 Promise 对象最后状态如何,都会执行的操作
    finally (cb) {
      return this.then(
        value  => MyPromise.resolve(cb()).then(() => value),
        reason => MyPromise.resolve(cb()).then(() => { throw reason })
      );
    }
}


#前端##学习路径#
全部评论

相关推荐

2 11 评论
分享
牛客网
牛客企业服务