自定义Promise之then方法的实现(上)

Promise原型对象上的then方法为Promise最核心的方法,同时也是最复杂的方法

1. then方法的实现(上)

1.1 同步下的then方法实现

当执行器内部更改Promise实例状态为同步时,是在then方法中执行回调的,因此只需根据Promise实例的状态去执行不同的函数

/*
  为 promise 指定成功/失败的回调函数
  函数的返回值是一个新的 promise 对象
*/
Promise.prototype.then = function (onResolved, onRejected) {
    // 判断实例的状态
+    if(this.PromiseState === 'fulfilled') {
+        onResolved(this.PromiseResult)
+    }

+    if(this.PromiseState === 'rejected') {
+        onRejected(this.PromiseResult)
+    }
}

1.2 异步下的then方法实现

当执行器内部更改Promise实例状态为异步时,then方法执行时实例的状态还没有改变,为pending状态。所以需要回调函数存储到专门存放回调函数的变量中,并在resolve或reject函数中调用

1.2.1 在Promise构造函数中定义存储回调函数的变量

/*
  Promise 构造函数
  executor: 内部同步执行的函数 (resolve, reject) => {}
*/
function Promise(executor) {
    // 定义存储回调函数的变量
+    this.callback = {}
}

1.2.2 在then方法中将回调函数存入callback中

/*
  为 promise 指定成功/失败的回调函数
  函数的返回值是一个新的 promise 对象
*/
Promise.prototype.then = function (onResolved, onRejected) {
    // 判断实例的状态
    if(this.PromiseState === 'fulfilled') {
        onResolved(this.PromiseResult)
    }

    if(this.PromiseState === 'rejected') {
        onRejected(this.PromiseResult)
    }

+   if(this.PromiseState === 'pending') {
+       // 将回调函数存入callback中
+       this.callback = {
+           onResolved,
+           onRejected
+       }
+   }

}

1.2.3 在resolve和reject函数中执行callback中存储的回调函数

// resolve函数,将实例对象的状态转为fulfilled
function resolve(value) {
    // 只有pending状态才能修改状态
    if(self.PromiseState !== 'pending') return
    // 修改实例对象的状态
    self.PromiseState = 'fulfilled'
    // 设置实例对象结果值
    self.PromiseResult = value

    // 调用成功的回调函数
+   if(self.callback.onResolved) {
+       self.callback.onResolved(value)
+   }

}

// resolve函数,将实例对象的状态转为rejected
function reject(reason) {
    // 只有pending状态才能修改状态
    if(self.PromiseState !== 'pending') return
    self.PromiseState = 'rejected'
    self.PromiseResult = reason

    // 调用失败的回调函数
+   if(self.callback.onRejected) {
+       self.callback.onRejected(reason)
+   }

}

1.2.4 指定多个回调

根据原生Promise可知,当给Promise实例对象指定多个then方法,添加多个回调函数时。当实例状态改变,所有对应的回调都会执行。因此,需要将之前定义的callback类型更改为数组类型,在resolve和reject函数中需要遍历callback数组,执行所有回调函数。

将构造函数中的callback改为callbacks数组

function Promise(executor) {
    // 定义存储回调函数的变量
-    this.callback = {}
+    this.callbacks = []
}

将then方法中回调函数存入callbacks数组中

Promise.prototype.then = function (onResolved, onRejected) {

    if(this.PromiseState === 'pending') {
-       // 将回调函数存入callback中
-       this.callback = {
-           onResolved,
-           onRejected
-       }

+       // 将回调函数存入callbacks数组中
+       this.callbacks.push({
+           onResolved,
+           onRejected
+       })
    }

}

修改resolve函数

function resolve(value) {
-   // 调用成功的回调函数
-   if(self.callback.onResolved) {
-       self.callback.onResolved(value)
-   }

+   // 遍历callbacks,执行其中所有的onResolved回调函数
+   self.callbacks.forEach(item => {
+     item.onResolved(value)
+   })

}

修改reject函数

function reject(reason) { 
-   // 调用失败的回调函数
-   if(self.callback.onRejected) {
-       self.callback.onRejected(reason)
-   }

+   // 遍历callbacks,执行其中所有的onRejected回调函数
+   self.callbacks.forEach(item => {
+     item.onRejected(reason)
+   })

}
暂无评论

发送评论 编辑评论


				
上一篇
下一篇