Promise从两眼发懵到双眼放光(6)-手写Promise之构造函数

show you my code

/**  
 * IIFE 
 */
 (function (window) {  
  
  const PENDING = 'pending'  
  const RESOLVED = 'resolved' //官方为fulfilled 
  const REJECTED = 'rejected'  
  
  /**  
   * Promise的构造器函数 
   * @param executor 同步执行器函数  
   * @constructor  
   */  
  function Promise(executor) {  
    const self = this //记录this对象,避免在后面的函数中this变window对象  
  
    self.status = PENDING //当前状态,初始值为pending  
    self.data = undefined //存储结果  
    self.callbacks = [] // 回调函数, 结构为{ onResolved() {}, onRejected() {}}  
  
    function resolve(value) {  
      //resolve函数直接调用,函数内的this会变成window,所以上面会用self保存了this  
      //如果当前不是pending状态,直接结束  
      if (self.status !== PENDING) return  
  
     //修改状态  
     self.status = RESOLVED  
     //保存数据  
     self.data = value  
     //如果callbacks中有回调函数,立即加入到回调队里中  
     //promise的回调属于微队列任务,这里用宏队列的setTimeout模拟  
     if (self.callbacks.length > 0) {  
        setTimeout(() => {  
          self.callbacks.forEach(callbackObj => {  
            callbackObj.onResolved(value)  
          })  
        }, 0)  
      }  
    }  
  
    //和resolve函数几乎一样  
    function reject(reason) {  
      if (self.status !== PENDING) return  
  
      self.status = REJECTED  
      self.data = reason  
  
      if (self.callbacks.length > 0) {  
        setTimeout(() => {  
          self.callbacks.forEach(callbackObj => {  
            callbackObj.onRejected(reason)  
          })  
        }, 0)  
      }  
    }  
  
    //立即同步执行executor  
    //如果throw异常,promise失败 
    try {  
      executor(resolve, reject)  
    } catch (error) {  
      reject(error)  
    }  
  }  
  
  /**  
 * Promise原型对象的then() 
 * @param onResolved 成功回调  
 * @param onRejected 失败回调  
 * @return 一个新的Promise对象  
 */  
 Promise.prototype.then = function (onResolved, onRejected) {  
    const self = this  
  //假设当前状态是pending,保存回调函数  
  self.callbacks.push({onResolved, onRejected})  
  }  
  
  //向外暴露Promise  
  window.Promise = Promise  
})(window)

测试

<!-- 引入手写Promise-->  
<script src="./2.Promise_构造函数.js"></script>  
  
<script>  
  const p = new Promise(((resolve, reject) => {  
    setTimeout(() => {  
      resolve(1)  
    },1000)  
  }))  
  p.then(  
    value => {  
      console.log("onResolved1", value)  
    },  
    reason => {  
      console.log("onRejected1", reason)  
    }  
  )  
  
</script>

执行结果:
onResolved1 1

代码已同步更新到github

https://github.com/hnt815/promise

Promise系列文章

Promise从两眼发懵到双眼放光(1)-准备篇
Promise从两眼发懵到双眼放光(2)-Promise基础
Promise从两眼发懵到双眼放光(3)-Promise的几个关键问题(一)
Promise从两眼发懵到双眼放光(4)-Promise的几个关键问题(二)
Promise从两眼发懵到双眼放光(5)-手写Promise之整体结构
Promise从两眼发懵到双眼放光(6)-手写Promise之构造函数
Promise从两眼发懵到双眼放光(7)-手写Promise之then方法和catch方法
Promise从两眼发懵到双眼放光(8)-手写Promise之resolve,reject,all,race方法
Promise从两眼发懵到双眼放光(9)-async和await