JavaScript Promise复习

Promise介绍

Promise是什么？

在Promise之前，我们都是使用回调来解决异步编程的问题，回调有一个比较难以处理的是回调地狱。
Promise是js实现的一个异步构造函数，可以使用new来实现。

Promise的状态

实例对象的一个属性 PromiseState

• pending 未决定的，等待
• resolved 成功
• rejected 失败

状态的改变

• pending变成resolved
• pending变成rejected
• throw抛出异常，状态会变更为rejected
  有2种情况能改变状态，且一个promise对象只能改变一次，无论变成成功还是失败，都会有一个结果

回调方法

promise有两回调方法
then和catch

• then 状态成功的时候调用
• catch 状态为失败的时候调用

改变状态和指定回调函数先后顺序

• 都有可能，正常情况下是先指定回调再改变状态，但也可以先改状态再指定回调
• 如何先改状态再指定回调？
• 在执行器中直接调用resolve()或者reject()
• 延迟更长时间才调用then()
• 什么时候能得到数据？
• 如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据
• 如果先改变状态，那当指定回调，回调函数就会调用，得到数据

Promise 对象的值

实例对象的另一个属性 PromiseResult
异步保存着成功/失败的结果

• resolve
• reject

动手写一个Promise

学习资料来源于B站的尚硅谷的WEB前端李强老师的Promise视频教程，
地址是：https://www.bilibili.com/video/BV1GA411x7z1?p=1 传送门

视频的学习笔记资料：笔记资料传送门

/**
 * 动手写Promise
 */
class Promise {
  // 构造器
  constructor(executor) {
    // 添加实例属性
    this.PromiseState = 'pending'
    this.PromiseResult = null
    this.callbacks = []
    const self = this

    function resolve(data) {
      if (self.PromiseState !== 'pending') return
      // 1. 修改对象的状态 PromiseState
      self.PromiseState = 'fulfilled'
      // 2. 设置对象的结果值 PromiseResult
      self.PromiseResult = data
      setTimeout(() => {
        self.callbacks.forEach(item => {
          item.onResoved(data)
        })
      })
    }

    function reject(data) {
      if (self.PromiseState !== 'pending') return
      self.PromiseState = 'rejected'
      self.PromiseResult = data
      setTimeout(() => {
        self.callbacks.forEach(item => {
          item.onRejected(data)
        })
      })
    }

    try {
      // 周步调用 执行函数
      executor(resolve, reject)
    } catch (e) {
      reject(e)
    }
  }

  /**
   * then方法 
   * @param {Function} onResoved 成功
   * @param {Function} onRejected 失败
   * @returns 
   */
  then(onResoved, onRejected) {
    const self = this
    // 判断回调函数是否存在
    if (typeof onResoved !== 'function') {
      onResoved = function (reson) {
        return reson
      }
    }
    if (typeof onRejected !== 'function') {
      onRejected = function (reson) {
        throw reson
      }
    }
    return new Promise((resolve, reject) => {
      function callback(fn) {
        try {
          // 获取回调函数的执行结果
          let result = fn(self.PromiseResult)
          // 判断执行结果是否为promise
          if (result instanceof Promise) {
            // 如果是Promise对象
            result.then(v => {
              resolve(v)
            }, r => {
              reject(r)
            })
          } else {
            // 结果为成功直接返回
            resolve(result)
          }
        } catch (e) {
          reject(e)
        }
      }
      // 调用回调函数
      if (this.PromiseState === 'fulfilled') {
        setTimeout(() => {
          callback(onResoved)
        });
      }
      if (this.PromiseState === 'rejected') {
        setTimeout(() => {
          callback(onRejected)
        })
      }
      if (this.PromiseState === 'pending') {
        // 保存回调函数
        this.callbacks.push({
          onResoved: function () {
            callback(onResoved)
          },
          onRejected: function () {
            callback(onRejected)
          }
        })
      }
    })
  }

  // catch 方法
  catch(onRejected) {
    return this.then(undefined, onRejected)
  }

  // resolve方法
  static resolve(value) {
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(v => {
          resolve(v)
        }, r => {
          reject(r)
        })
      } else {
        resolve(value)
      }
    })
  }

  // reject方法
  static reject(reason) {
    return new Promise((resolve, reject) => {
      reject(reason)
    })
  }

  // all方法
  static all(promise) {
    return new Promise((resolve,reject) => {
      // 成功变量计数器
      let count = 0
      let values = []
      for(let i =0; i<promise.length ; i++) {
        promise[i].then( v=> {
          // 如果执行这里就是成功
          count ++
          values[i] = v
          // 都成功
          if(count === promise.length) {
            resolve(values)
          }
        }, r=> {
          // 如果执行这里就是失败
          reject(r)
        })
      }
    })
  }

  static race(promise) {
    return new Promise((resolve, reject) => {
      for(let i =0; i<promise.length ; i++) {
        promise[i].then( v=> {
          // 修改返回对象的状态为成功
          resolve(v)
        }, r=> {
          // 如果执行这里就是失败
          reject(r)
        })
      }
    })
  }

}