手写一个符合Promise/A+规范

为什么promise出现

• 解决异步回掉问题
• 以下情况是如果不要promise

  // ajax
  function getData(url, data, callback) {
    $.ajax({
      type: 'GET',
      url: url,
      data: data
      success: function(res) {
        $.ajax({
          ...
          $.ajax({
            ...
          })
        })
      }
    })
  }

promise写法， 链式调用

function getData(url, data) {
  return new Promise((resolve, reject) => {
    $.ajax({
      type: 'GET',
      url: url,
      data: data,
      success: function(res) {
        resolve(res)
      },
      fail: function(err) {
        reject(res)
      }
    })
  })
}

getData(url, data).then(res => {})

promise三种状态

• pending, 等待
• fulfilled, 拿result, resolve()
• rejected, 拿error, reject()

promise规范

• promise内部一定又一个函数会在传入参数后立即执行
• 所以我们模拟这个过程，并将三种状态的变化带上

  function Promise(executor) {
    let _this = this
    _this.status = 'pending'
  
    function resolve(fn) {
      if(_this.status === 'pending') {
        _this.onResolved.forEach(fn => fn()) // 链式操作需要
        _this.status = 'fulfilled'
      }
    }
    function reject() {
      if(_this.status === 'pending') {
        _this.onResolved.forEach(fn => fn()) // 链式操作需要
        _this.status = 'rejected'
      }
    }
  
    // 异常处理
    try {
      executor(resolve, reject)
    } catch (err) {
      reject(err)
    }
  }
  
  // 为Promise添加`.then`方法
  Promise.prototype.then = function(onfulfiled, onrejected) {
    // 入餐处理
    onfulfiled = typeof onfulfiled === 'function' ? onfulfiled : res => res
    onrejected = typeof onrejected === 'function' ? onrejected : err => {throw err}
  
    let _this = this
    let promise = new Promise((reslove, reject) => {
      switch (_this.status) {
        case 'fulfiled':
          onfulfiled(res)
          break
        case 'rejected':
          onrejected(err)
          break
        default:
          _this.Promise(promise)
          break
      }
    })
    return promise
  }

未完.(待续)