从零手撕Promise，掌握Promise的实现原理(9)then方法链式调用之核心方法resolvePromise完全体

「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」。

传送门

回顾

经过前几篇文章的介绍，现在我们的Promise已经就要接近尾声，现在我们实现的Promsie长这样

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
const resolvePromise = (promise, x, resolve, reject) => {

  // 1.首先判断`x`是基础类型数据，还是引用类型，基础类型的数据直接`resolve`,即可。  
  if(x !== null && /^(object|function)$/.test(typeof x)){
    let then 
    // 2. 如果是引用类型的数据，尝试获取`x`上的`then`属性(`x.then`)，如果在获取属性的时候报异常则`reject`
    try{
      then = x.then
    }catch(e){
      reject(e)
    }
    //3. 判断`then`是否是函数，如果是一个函数则我们认定它为`Promise`,如果不是则`resolve`
    if(typeof then === 'function'){
      let called = false //**************************************这里加了变量*************************//////
      try{
        then.call(x, (y) => {
          if(called) return //**************************************这里加了变量*************************//////
          called = true
          resolvePromise(promise, y, resolve, reject)
        },(r) => {
          if(called) return//**************************************这里加了变量*************************//////
          reject(r)
        })
      }catch(e){
        if(called) return//**************************************这里加了变量*************************//////
        reject(e)
      }
    }else{
      resolve(x)
    }
  }else{
    //基础类型数据直接resolve
    resolve(x)
  }
}
class Promise{
  constructor(executor){

    this.state = PENDING
    this.value = undefined
    this.reason = undefined
    //存放onFulfilled
    this.onResolvedCallbacks = []
    //存放onRejected
    this.onRejectedCallbacks = []
    const resolve = (value) => {
      if (this.state === PENDING) {
        this.value = value
        this.state = FULFILLED
        //promise实例状态改变后调用暂存的onFulfilled
        this.onResolvedCallbacks.forEach(fn => fn())
      }
    }

    const reject = (reason) => {
      if (this.state === PENDING) {
        this.reason = reason
        this.state = REJECTED
        //promise实例状态改变后调用的onRejected
        this.onRejectedCallbacks.forEach(fn => fn())
      }
    }
    try {
      //executor函数执行过程中出错，将会导致Promise失败
      executor(resolve,reject)
    } catch (error) {
      reject(error)
    }
  }
  then(onFulfilled, onRejected){

    let promise = new Promise((resolve, reject) => {
        
        switch(this.state){
          case FULFILLED:
              setTimeout(() => {
                try{
                  let x = onFulfilled(this.value)
                  resolvePromise(promise, x, resolve, reject)
                } catch(e){
                  reject(e)
                }
              })   
              break
          case REJECTED:
              setTimeout(() => {
                try{
                  let x = onRejected(this.reason)
                  resolvePromise(promise, x, resolve, reject)
                } catch(e){
                  reject(e)
                }
              })   
              break
          default:
            this.onResolvedCallbacks.push(() => {
              setTimeout(() => {
                try{
                  let x = onFulfilled(this.value)
                  resolvePromise(promise, x, resolve, reject)
                } catch(e){
                  reject(e)
                }
              })
            })
            this.onRejectedCallbacks.push(() => {
              setTimeout(() => {
                try{
                  let x = onRejected(this.reason)
                  resolvePromise(promise, x, resolve, reject)
                } catch(e){
                  reject(e)
                }
              })
            })
        }
    })
    return promise
  }
}

resolvePromise方法小瑕疵解决

我们来看下面这段代码，假如说，then回调函数中返回的Promise是then函数本身所返回的Promsie，就会出现问题。
会出现什么问题呢？
- 按照我们代码的执行逻辑，首先then的回调函数返回一个Promsie，会由resolvePromsie方法去解析。
- 就以下代码来说pThen是第一个then函数的返回值，又把pThen作为了then的成功回调的返回值，那么resolvePromsie方法中又会调用pThen的then方法，将pThen这个实例自己的resolve与reject，这样就造成了自己等待自己状态的死循环。（就类似于一个荒唐的列子，我等我自己做饭给我自己吃，我们是永远等不到的）

let p = new Promise((resolve,reject) => {
  resolve('成功')
})

let pThen = then(value => {
return pThen
}).then(value => {
console.log('value',value);
},reason => {
console.log('reason',reason);
})

因此对于这个问题，我们需要改造一下resolvePromsie方法，做个小判断即可,代码如下

const resolvePromise = (promise, x, resolve, reject) => {
  //*******************************************************判断x与promsie是否是同一个promise，防止进入死循环*********************//////*********
  if(x === promise) throw new TypeError('Chaining cycle detected for promise #<Promise>')


  // 1.首先判断`x`是基础类型数据，还是引用类型，基础类型的数据直接`resolve`,即可。  
  if(x !== null && /^(object|function)$/.test(typeof x)){
    let then 
    // 2. 如果是引用类型的数据，尝试获取`x`上的`then`属性(`x.then`)，如果在获取属性的时候报异常则`reject`
    try{
      then = x.then
    }catch(e){
      reject(e)
    }
    //3. 判断`then`是否是函数，如果是一个函数则我们认定它为`Promise`,如果不是则`resolve`
    if(typeof then === 'function'){
      let called = false 
      try{
        then.call(x, (y) => {
          if(called) return 
          called = true
          resolvePromise(promise, y, resolve, reject)
        },(r) => {
          if(called) return
          reject(r)
        })
      }catch(e){
        if(called) return
        reject(e)
      }
    }else{
      resolve(x)
    }
  }else{
    //基础类型数据直接resolve
    resolve(x)
  }
}

传送门

从零手撕Promise，掌握Promise的实现原理(9)then方法链式调用之核心方法resolvePromise完全体

回顾

resolvePromise方法小瑕疵解决

下篇文章解决then方法的小瑕疵

下篇文章解决`then`方法的小瑕疵