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

2次阅读

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

一、Promise 外围逻辑实现
二、在 Promise 类中退出异步逻辑
三、实现 then 办法屡次调用增加多个处理函数
四、实现 then 办法的链式调用
五、then 办法链式调用辨认 Promise 对象自返回
六、捕捉谬误及 then 链式调用其余状态代码补充
- 1. 捕捉执行器的谬误
- 1. then 执行的时候报错捕捉
- 1. 谬误之后的链式调用
- 1. 异步状态下链式调用
七、将 then 办法的参数变成可选参数
八、promise.all 办法的实现
九、Promise.resolve 办法的实现
十、finally 办法的实现
十一、catch 办法的实现
Promise 全副代码整合

首先剖析其原理

promise就是一个类 

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

Promise中有三种状态，别离为胜利 -fulfilled 失败 -rejected 期待 -pending 
pending -> fulfilled 
pending -> rejected 
一旦状态确定就不可更改

resolve 和 reject函数是用来更改状态的 

resolve：fulfilled 
reject：rejected

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

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

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.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

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

这里如果有三个 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办法要链式调用那么就须要返回一个 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 对象，则会产生 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>

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

捕捉执行器中的代码，如果执行器中有代码谬误，那么 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
// 执行器谬误

// 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

// 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

还是要解决一下如果 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 办法的两个参数都是可选参数，咱们能够不传参数。
上面的参数能够传递到最初进行返回

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办法是解决异步并发问题的

// 如果 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 对象，间接返回，如果是一个值，那么须要生成一个 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 办法之后调用 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办法是为了捕捉 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

// 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

正文完

javascript

发表至： javascript

2020-09-20

0

关于javascript:Nodejs中exports和moduleexports的区别

使用-localStorage-实现多页面通信

关于javascript:使用-babel-全家桶模块化古老的面条代码

关于javascript:选择篇038下面代码的输出是什么

关于webassembly:WebAssembly-与-cc

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

目录

一、Promise 外围逻辑实现

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

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

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

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

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

1. 捕捉执行器的谬误

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

3. 谬误之后的链式调用

4. 异步状态下链式调用

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

八、promise.all 办法的实现

九、Promise.resolve 办法的实现

十、finally 办法的实现

十一、catch 办法的实现

Promise 全副代码整合

站内搜索