关于javascript:深度剖析手写一个Promise源码

37次阅读

共计 19371 个字符,预计需要花费 49 分钟才能阅读完成。

目录

  • 一、Promise 外围逻辑实现
  • 二、在 Promise 类中退出异步逻辑
  • 三、实现 then 办法屡次调用增加多个处理函数
  • 四、实现 then 办法的链式调用
  • 五、then 办法链式调用辨认 Promise 对象自返回
  • 六、捕捉谬误及 then 链式调用其余状态代码补充

      1. 捕捉执行器的谬误
      1. then 执行的时候报错捕捉
      1. 谬误之后的链式调用
      1. 异步状态下链式调用
  • 七、将 then 办法的参数变成可选参数
  • 八、promise.all 办法的实现
  • 九、Promise.resolve 办法的实现
  • 十、finally 办法的实现
  • 十一、catch 办法的实现
  • Promise 全副代码整合

一、Promise 外围逻辑实现

首先剖析其原理

  1. promise就是一个类 <br/>

在执行类的时候须要传递一个执行器进去,执行器会立刻执行

  1. Promise中有三种状态,别离为胜利 -fulfilled 失败 -rejected 期待 -pending<br/>
    pending -> fulfilled<br/>
    pending -> rejected<br/>
    一旦状态确定就不可更改
  2. resolvereject函数是用来更改状态的 <br/>

resolve:fulfilled<br/>
reject:rejected

  1. then办法外部做的事件就是判断状态

如果状态是胜利,调用胜利回调函数 <br/>
如果状态是失败,就调用失败回调函数 <br/>
then办法是被定义在原型对象中的

  1. then胜利回调有一个参数,示意胜利之后的值;then失败回调有一个参数,示意失败后的起因

<PS: 本文 myPromise.js 是源码文件,promise.js 是应用 promise 文件 >

// myPromise.js
// 定义成常量是为了复用且代码有提醒
const PENDING = 'pending' // 期待
const FULFILLED = 'fulfilled' // 胜利
const REJECTED = 'rejected' // 失败
// 定义一个构造函数
class MyPromise {constructor (exector) {
    // exector 是一个执行器,进入会立刻执行,并传入 resolve 和 reject 办法
    exector(this.resolve, this.reject)
  }

  // 实例对象的一个属性,初始为期待
  status = PENDING
  // 胜利之后的值
  value = undefined
  // 失败之后的起因
  reason = undefined

  // resolve 和 reject 为什么要用箭头函数?// 如果间接调用的话,一般函数 this 指向的是 window 或者 undefined
  // 用箭头函数就能够让 this 指向以后实例对象
  resolve = value => {
    // 判断状态是不是期待,阻止程序向下执行
    if(this.status !== PENDING) return
    // 将状态改成胜利
    this.status = FULFILLED
    // 保留胜利之后的值
    this.value = value
  }

  reject = reason => {if(this.status !== PENDING) return
    // 将状态改为失败
    this.status = REJECTED
    // 保留失败之后的起因
    this.reason = reason
  }

  then (successCallback, failCallback) {
    // 判断状态
    if(this.status === FULFILLED) {
      // 调用胜利回调,并且把值返回
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      // 调用失败回调,并且把起因返回
      failCallback(this.reason)
    }
  }
}

module.exports = MyPromise
//promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {resolve('success')
   reject('err')
 })

 promise.then(value => {console.log('resolve', value)
 }, reason => {console.log('reject', reason)
 })

二、在 Promise 类中退出异步逻辑

下面是没有通过异步解决的,如果有异步逻辑加进来,会有一些问题

//promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  // 主线程代码立刻执行,setTimeout 是异步代码,then 会马上执行,// 这个时候判断 promise 状态,状态是 pending,然而之前并没有判断期待这个状态
  setTimeout(() => {resolve('success')
  }, 2000); 
 })

 promise.then(value => {console.log('resolve', value)
 }, reason => {console.log('reject', reason)
 })

上面批改这个代码

// myPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {constructor (exector) {exector(this.resolve, this.reject)
  }


  status = PENDING
  value = undefined
  reason = undefined
  // 定义一个胜利回调参数
  successCallback = undefined
  // 定义一个失败回调参数
  failCallback = undefined

  resolve = value => {if(this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    // 判断胜利回调是否存在,如果存在就调用
    this.successCallback && this.successCallback(this.value)
  }

  reject = reason => {if(this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    // 判断失败回调是否存在,如果存在就调用
    this.failCallback && this.failCallback(this.reason)
  }

  then (successCallback, failCallback) {if(this.status === FULFILLED) {successCallback(this.value)
    } else if (this.status === REJECTED) {failCallback(this.reason)
    } else {
      // 期待
      // 因为并不知道状态,所以将胜利回调和失败回调存储起来
      // 等到执行成功失败函数的时候再传递
      this.successCallback = successCallback
      this.failCallback = failCallback
    }
  }
}

module.exports = MyPromise

三、实现 then 办法屡次调用增加多个处理函数

promisethen 办法是能够被屡次调用的。

这里如果有三个 then 的调用,

  • 如果是同步回调,那么间接返回以后的值就行;
  • 如果是异步回调,那么保留的成功失败的回调,须要用不同的值保留,因为都互不雷同。

之前的代码须要改良。

//promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {setTimeout(() => {resolve('success')
  }, 2000); 
 })

 promise.then(value => {console.log(1)
   console.log('resolve', value)
 })
 
 promise.then(value => {console.log(2)
  console.log('resolve', value)
})

promise.then(value => {console.log(3)
  console.log('resolve', value)
})

保留到数组中,最初对立执行

// myPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {constructor (exector) {exector(this.resolve, this.reject)
  }


  status = PENDING
  value = undefined
  reason = undefined
  // 定义一个胜利回调参数,初始化一个空数组
  successCallback = []
  // 定义一个失败回调参数,初始化一个空数组
  failCallback = []

  resolve = value => {if(this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    // 判断胜利回调是否存在,如果存在就调用
    // 循环回调数组. 把数组后面的办法弹出来并且间接调用
    // shift 办法是在数组中删除值,每执行一个就删除一个,最终变为 0
    while(this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {if(this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    // 判断失败回调是否存在,如果存在就调用
    // 循环回调数组. 把数组后面的办法弹出来并且间接调用
    while(this.failCallback.length) this.failCallback.shift()(this.reason)
  }

  then (successCallback, failCallback) {if(this.status === FULFILLED) {successCallback(this.value)
    } else if (this.status === REJECTED) {failCallback(this.reason)
    } else {
      // 期待
      // 将胜利回调和失败回调都保留在数组中
      this.successCallback.push(successCallback)
      this.failCallback.push(failCallback)
    }
  }
}

module.exports = MyPromise

四、实现 then 办法的链式调用

  • then办法要链式调用那么就须要返回一个 promise 对象,
  • then办法的 return 返回值作为下一个 then 办法的参数
  • then办法还一个 return 一个 promise 对象,那么如果是一个 promise 对象,那么就须要判断它的状态
// promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
// 目前这里只解决同步的问题
    resolve('success')
})

function other () {return new MyPromise((resolve, reject) =>{resolve('other')
   })
}
promise.then(value => {console.log(1)
   console.log('resolve', value)
   return other()}).then(value => {console.log(2)
  console.log('resolve', value)
})
// myPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {constructor (exector) {exector(this.resolve, this.reject)
  }

  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []

  resolve = value => {if(this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    while(this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {if(this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    while(this.failCallback.length) this.failCallback.shift()(this.reason)
  }

  then (successCallback, failCallback) {
    // then 办法返回第一个 promise 对象
    let promise2 = new Promise((resolve, reject) => {if(this.status === FULFILLED) {
        // x 是上一个 promise 回调函数的 return 返回值
        // 判断 x 的值时一般值还是 promise 对象
        // 如果是普通纸 间接调用 resolve
        // 如果是 promise 对象 查看 promise 对象返回的后果
        // 再依据 promise 对象返回的后果 决定调用 resolve 还是 reject
        let x = successCallback(this.value)
        resolvePromise(x, resolve, reject)
      } else if (this.status === REJECTED) {failCallback(this.reason)
      } else {this.successCallback.push(successCallback)
        this.failCallback.push(failCallback)
      }
    });
    return promise2
  }
}

function resolvePromise(x, resolve, reject) {
  // 判断 x 是不是其实例对象
  if(x instanceof MyPromise) {
    // promise 对象
    // x.then(value => resolve(value), reason => reject(reason))
    // 简化之后
    x.then(resolve, reject)
  } else{
    // 一般值
    resolve(x)
  }
}

module.exports = MyPromise

五、then 办法链式调用辨认 Promise 对象自返回

如果 then 办法返回的是本人的 promise 对象,则会产生 promise 的嵌套,这个时候程序会报错

var promise = new Promise((resolve, reject) => {resolve(100)
})
var p1 = promise.then(value => {console.log(value)
  return p1
})

// 100
// Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

所以为了防止这种状况,咱们须要革新一下 then 办法

// myPromise.js
const {rejects} = require("assert")

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {constructor (exector) {exector(this.resolve, this.reject)
  }


  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []

  resolve = value => {if(this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    while(this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {if(this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    while(this.failCallback.length) this.failCallback.shift()(this.reason)
  }

  then (successCallback, failCallback) {let promise2 = new Promise((resolve, reject) => {if(this.status === FULFILLED) {
        // 因为 new Promise 须要执行实现之后才有 promise2,同步代码中没有 pormise2,// 所以这部分代码须要异步执行
        setTimeout(() => {let x = successCallback(this.value)
          // 须要判断 then 之后 return 的 promise 对象和原来的是不是一样的,// 判断 x 和 promise2 是否相等,所以给 resolvePromise 中传递 promise2 过来
          resolvePromise(promise2, x, resolve, reject)
        }, 0);
      } else if (this.status === REJECTED) {failCallback(this.reason)
      } else {this.successCallback.push(successCallback)
        this.failCallback.push(failCallback)
      }
    });
    return promise2
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  // 如果相等了,阐明 return 的是本人,抛出类型谬误并返回
  if (promise2 === x) {return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if(x instanceof MyPromise) {x.then(resolve, reject)
  } else{resolve(x)
  }
}

module.exports = MyPromise
// promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {resolve('success')
})
 
// 这个时候将 promise 定义一个 p1,而后返回的时候返回 p1 这个 promise
let p1 = promise.then(value => {console.log(1)
   console.log('resolve', value)
   return p1
})
 
// 运行的时候会走 reject
p1.then(value => {console.log(2)
  console.log('resolve', value)
}, reason => {console.log(3)
  console.log(reason.message)
})

// 1
// resolve success
// 3
// Chaining cycle detected for promise #<Promise>

六、捕捉谬误及 then 链式调用其余状态代码补充

目前咱们在 Promise 类中没有进行任何解决,所以咱们须要捕捉和处理错误。

1. 捕捉执行器的谬误

捕捉执行器中的代码,如果执行器中有代码谬误,那么 promise 的状态要弄成谬误状态

// myPromise.js
constructor (exector) {
    // 捕捉谬误,如果有谬误就执行 reject
    try {exector(this.resolve, this.reject)
    } catch (e) {this.reject(e)
    }
}
// promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {// resolve('success')
    throw new Error('执行器谬误')
})
 
promise.then(value => {console.log(1)
  console.log('resolve', value)
}, reason => {console.log(2)
  console.log(reason.message)
})

//2
// 执行器谬误

2. then 执行的时候报错捕捉

// myPromise.js
then (successCallback, failCallback) {let promise2 = new Promise((resolve, reject) => {if(this.status === FULFILLED) {setTimeout(() => {
                // 如果回调中报错的话就执行 reject
                try {let x = successCallback(this.value)
                    resolvePromise(promise2, x, resolve, reject)
                } catch (e) {reject(e)
                }
            }, 0);
        } else if (this.status === REJECTED) {failCallback(this.reason)
        } else {this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    });
    return promise2
}
// promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {resolve('success')
    // throw new Error('执行器谬误')
 })
 
// 第一个 then 办法中的谬误要在第二个 then 办法中捕捉到
promise.then(value => {console.log(1)
  console.log('resolve', value)
  throw new Error('then error')
}, reason => {console.log(2)
  console.log(reason.message)
}).then(value => {console.log(3)
  console.log(value);
}, reason => {console.log(4)
  console.log(reason.message)
})

// 1
// resolve success
// 4
// then error

3. 谬误之后的链式调用

// myPromise.js
then (successCallback, failCallback) {let promise2 = new Promise((resolve, reject) => {if(this.status === FULFILLED) {setTimeout(() => {
                try {let x = successCallback(this.value)
                    resolvePromise(promise2, x, resolve, reject)
                } catch (e) {reject(e)
                }
            }, 0)
        // 在状态是 reject 的时候对返回的 promise 进行解决
        } else if (this.status === REJECTED) {setTimeout(() => {
                // 如果回调中报错的话就执行 reject
                try {let x = failCallback(this.reason)
                    resolvePromise(promise2, x, resolve, reject)
                } catch (e) {reject(e)
                }
            }, 0)
        } else {this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    });
    return promise2
}
//promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {// resolve('success')
    throw new Error('执行器谬误')
 })
 
 // 第一个 then 办法中的谬误要在第二个 then 办法中捕捉到
 promise.then(value => {console.log(1)
  console.log('resolve', value)
}, reason => {console.log(2)
  console.log(reason.message)
  return 100
}).then(value => {console.log(3)
  console.log(value);
}, reason => {console.log(4)
  console.log(reason.message)
})

// 2
// 执行器谬误
// 3
// 100

4. 异步状态下链式调用

还是要解决一下如果 promise 外面有异步的时候,then的链式调用的问题。

// myPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {constructor (exector) {
    // 捕捉谬误,如果有谬误就执行 reject
    try {exector(this.resolve, this.reject)
    } catch (e) {this.reject(e)
    }
  }


  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []

  resolve = value => {if(this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    // 异步回调传值
    // 调用的时候不须要传值,因为上面 push 到外面的时候曾经解决好了
    while(this.successCallback.length) this.successCallback.shift()()
  }

  reject = reason => {if(this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    // 异步回调传值
    // 调用的时候不须要传值,因为上面 push 到外面的时候曾经解决好了
    while(this.failCallback.length) this.failCallback.shift()()
  }

  then (successCallback, failCallback) {let promise2 = new Promise((resolve, reject) => {if(this.status === FULFILLED) {setTimeout(() => {
          // 如果回调中报错的话就执行 reject
          try {let x = successCallback(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {reject(e)
          }
        }, 0)
      } else if (this.status === REJECTED) {setTimeout(() => {
          // 如果回调中报错的话就执行 reject
          try {let x = failCallback(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {reject(e)
          }
        }, 0)
      } else {
        // 解决异步的胜利谬误状况
        this.successCallback.push(() => {setTimeout(() => {
            // 如果回调中报错的话就执行 reject
            try {let x = successCallback(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {reject(e)
            }
          }, 0)
        })
        this.failCallback.push(() => {setTimeout(() => {
            // 如果回调中报错的话就执行 reject
            try {let x = failCallback(this.reason)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {reject(e)
            }
          }, 0)
        })
      }
    });
    return promise2
  }
}

function resolvePromise(promise2, x, resolve, reject) {if (promise2 === x) {return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if(x instanceof MyPromise) {x.then(resolve, reject)
  } else{resolve(x)
  }
}

module.exports = MyPromise
// promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  // 一个异步办法
  setTimeout(() =>{resolve('succ')
  },2000)
})
 
 promise.then(value => {console.log(1)
  console.log('resolve', value)
  return 'aaa'
}, reason => {console.log(2)
  console.log(reason.message)
  return 100
}).then(value => {console.log(3)
  console.log(value);
}, reason => {console.log(4)
  console.log(reason.message)
})

// 1
// resolve succ
// 3
// aaa

七、将 then 办法的参数变成可选参数

then 办法的两个参数都是可选参数,咱们能够不传参数。
上面的参数能够传递到最初进行返回

var promise = new Promise((resolve, reject) => {resolve(100)
    })
    promise
      .then()
      .then()
      .then()
      .then(value => console.log(value))
// 在控制台最初一个 then 中输入了 100

// 这个相当于
promise
  .then(value => value)
  .then(value => value)
  .then(value => value)
  .then(value => console.log(value))

所以咱们批改一下 then 办法

// myPromise.js
then (successCallback, failCallback) {
    // 这里进行判断,如果有回调就抉择回调,如果没有回调就传一个函数,把参数传递
    successCallback = successCallback ? successCallback : value => value
    // 谬误函数也是进行赋值,把错误信息抛出
    failCallback = failCallback ? failCallback : reason => {throw reason}
    let promise2 = new Promise((resolve, reject) => {...})
    ...
}


// 简化也能够这样写
then (successCallback = value => value, failCallback = reason => {throw reason}) {···}

resolve之后

// promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {resolve('succ')
})
 
promise.then().then().then(value => console.log(value))

// succ

reject之后

// promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {reject('err')
})
 
 promise.then().then().then(value => console.log(value), reason => console.log(reason))

// err

八、promise.all 办法的实现

promise.all办法是解决异步并发问题的

// 如果 p1 是两秒之后执行的,p2 是立刻执行的,那么依据失常的是 p2 在 p1 的后面。// 如果咱们在 all 中指定了执行程序,那么会依据咱们传递的程序进行执行。function p1 () {return new Promise((resolve, reject) => {setTimeout(() => {resolve('p1')
    }, 2000)
  })
}

function p2 () {return new Promise((resolve, reject) => {setTimeout(() => {resolve('p2')
    },0)
  })
}

Promise.all(['a', 'b', p1(), p2(), 'c']).then(result => {console.log(result)
  // ["a", "b", "p1", "p2", "c"]
})

剖析一下:

  • all办法接管一个数组,数组中能够是一般值也能够是 promise 对象
  • 数组中值得程序肯定是咱们失去的后果的程序
  • promise返回值也是一个 promise 对象,能够调用 then 办法
  • 如果数组中所有值是胜利的,那么 then 外面就是胜利回调,如果有一个值是失败的,那么 then 外面就是失败的
  • 应用 all 办法是用类间接调用,那么 all 肯定是一个静态方法
//myPromise.js
static all (array) {
    //  后果数组
    let result = []
    // 计数器
    let index = 0
    return new Promise((resolve, reject) => {let addData = (key, value) => {result[key] = value
        index ++
        // 如果计数器和数组长度雷同,那阐明所有的元素都执行结束了,就能够输入了
        if(index === array.length) {resolve(result)
        }
      }
      // 对传递的数组进行遍历
      for (let i = 0; i < array.lengt; i++) {let current = array[i]
        if (current instanceof MyPromise) {
          // promise 对象就执行 then,如果是 resolve 就把值增加到数组中去,如果是谬误就执行 reject 返回
          current.then(value => addData(i, value), reason => reject(reason))
        } else {
          // 一般值就加到对应的数组中去
          addData(i, array[i])
        }
      }
    })
}
// promise.js
const MyPromise = require('./myPromise')
function p1 () {return new MyPromise((resolve, reject) => {setTimeout(() => {resolve('p1')
    }, 2000)
  })
}

function p2 () {return new MyPromise((resolve, reject) => {setTimeout(() => {resolve('p2')
    },0)
  })
}

Promise.all(['a', 'b', p1(), p2(), 'c']).then(result => {console.log(result)
  // ["a", "b", "p1", "p2", "c"]
})

九、Promise.resolve 办法的实现

  • 如果参数就是一个 promise 对象,间接返回,如果是一个值,那么须要生成一个 promise 对象,把值进行返回
  • Promise 类的一个静态方法
// myPromise.js
static resolve (value) {
    // 如果是 promise 对象,就间接返回
    if(value instanceof MyPromise) return value
    // 如果是值就返回一个 promise 对象,并返回值
    return new MyPromise(resolve => resolve(value))
}
// promise.js
const MyPromise = require('./myPromise')
function p1 () {return new MyPromise((resolve, reject) => {setTimeout(() => {resolve('p1')
    }, 2000)
  })
}


Promise.resolve(100).then(value => console.log(value))
Promise.resolve(p1()).then(value => console.log(value))
// 100
// 2s 之后输入 p1

十、finally 办法的实现

  • 无论以后最终状态是胜利还是失败,finally都会执行
  • 咱们能够在 finally 办法之后调用 then 办法拿到后果
  • 这个函数是在原型对象上用的
// myPromise.js
finally (callback) {
    // 如何拿到以后的 promise 的状态,应用 then 办法,而且不管怎样都返回 callback
    // 而且 then 办法就是返回一个 promise 对象,那么咱们间接返回 then 办法调用之后的后果即可
    // 咱们须要在回调之后拿到胜利的回调,所以须要把 value 也 return
    // 失败的回调也抛出起因
    // 如果 callback 是一个异步的 promise 对象,咱们还须要期待其执行结束,所以须要用到静态方法 resolve
    return this.then(value => {
      // 把 callback 调用之后返回的 promise 传递过来,并且执行 promise,且在胜利之后返回 value
      return MyPromise.resolve(callback()).then(() => value)
    }, reason => {
      // 失败之后调用的 then 办法,而后把失败的起因返回进来。return MyPromise.resolve(callback()).then(() => { throw reason})
    })
}
// promise.js
const MyPromise = require('./myPromise')
function p1 () {return new MyPromise((resolve, reject) => {setTimeout(() => {resolve('p1')
    }, 2000)
  })
}

function p2 () {return new MyPromise((resolve, reject) => {reject('p2 reject')
  })
}

p2().finally(() => {console.log('finallyp2')
  return p1()}).then(value => {console.log(value)
}, reason => {console.log(reason)
})

// finallyp2
// 两秒之后执行 p2 reject

十一、catch 办法的实现

  • catch办法是为了捕捉 promise 对象的所有谬误回调的
  • 间接调用 then 办法,而后胜利的中央传递undefined,谬误的中央传递reason
  • catch办法是作用在原型对象上的办法
// myPromise.js
catch (failCallback) {return this.then(undefined, failCallback)
}
// promise.js
const MyPromise = require('./myPromise')

function p2 () {return new MyPromise((resolve, reject) => {reject('p2 reject')
  })
}

p2()
  .then(value => {console.log(value)
  })
  .catch(reason => console.log(reason))

// p2 reject

Promise 全副代码整合

// myPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {constructor (exector) {
    try {exector(this.resolve, this.reject)
    } catch (e) {this.reject(e)
    }
  }


  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []

  resolve = value => {if(this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    while(this.successCallback.length) this.successCallback.shift()()
  }

  reject = reason => {if(this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    while(this.failCallback.length) this.failCallback.shift()()
  }

  then (successCallback = value => value, failCallback = reason => {throw reason}) {let promise2 = new Promise((resolve, reject) => {if(this.status === FULFILLED) {setTimeout(() => {
          try {let x = successCallback(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {reject(e)
          }
        }, 0)
      } else if (this.status === REJECTED) {setTimeout(() => {
          try {let x = failCallback(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {reject(e)
          }
        }, 0)
      } else {this.successCallback.push(() => {setTimeout(() => {
            try {let x = successCallback(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {reject(e)
            }
          }, 0)
        })
        this.failCallback.push(() => {setTimeout(() => {
            try {let x = failCallback(this.reason)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {reject(e)
            }
          }, 0)
        })
      }
    });
    return promise2
  }

  finally (callback) {
    // 如何拿到以后的 promise 的状态,应用 then 办法,而且不管怎样都返回 callback
    // 而且 then 办法就是返回一个 promise 对象,那么咱们间接返回 then 办法调用之后的后果即可
    // 咱们须要在回调之后拿到胜利的回调,所以须要把 value 也 return
    // 失败的回调也抛出起因
    // 如果 callback 是一个异步的 promise 对象,咱们还须要期待其执行结束,所以须要用到静态方法 resolve
    return this.then(value => {
      // 把 callback 调用之后返回的 promise 传递过来,并且执行 promise,且在胜利之后返回 value
      return MyPromise.resolve(callback()).then(() => value)
    }, reason => {
      // 失败之后调用的 then 办法,而后把失败的起因返回进来。return MyPromise.resolve(callback()).then(() => { throw reason})
    })
  }

  catch (failCallback) {return this.then(undefined, failCallback)
  }

  static all (array) {let result = []
    let index = 0
    return new Promise((resolve, reject) => {let addData = (key, value) => {result[key] = value
        index ++
        if(index === array.length) {resolve(result)
        }
      }
      for (let i = 0; i < array.lengt; i++) {let current = array[i]
        if (current instanceof MyPromise) {current.then(value => addData(i, value), reason => reject(reason))
        } else {addData(i, array[i])
        }
      }
    })
  }

  static resolve (value) {if(value instanceof MyPromise) return value
    return new MyPromise(resolve => resolve(value))
  }
}

function resolvePromise(promise2, x, resolve, reject) {if (promise2 === x) {return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if(x instanceof MyPromise) {x.then(resolve, reject)
  } else{resolve(x)
  }
}

module.exports = MyPromise

正文完
 0