2022年了--你还不会手写promise? 完成promise的所有实现

手写promise，将静态方法和实例方法都进行了一遍实现。也可以实现链式调用。

/*
 * @Author: 毛毛 
 * @Date: 2022-01-03 10:17:47 
 * @Last Modified by:   毛毛 
 * @Last Modified time: 2022-01-03 10:17:47 
 *//**
 *
 * 手写promise
 * @class MaoPromise
 */classMaoPromise{/**
   * 正在执行的状态
   *
   * @static
   * @memberof MaoPromise
   */static _PROMISE_STATUS_PENDING ="pending";/**
   * 成功执行的状态
   *
   * @static
   * @memberof MaoPromise
   */static _PROMISE_STATUS_FULFILLED ="fulfilled";/**
   * 失败执行的状态
   *
   * @static
   * @memberof MaoPromise
   */static _PROMISE_STATUS_REJECTED ="rejected";/**
   * 默认的状态 执行中
   *
   * @memberof MaoPromise
   */
  _status = MaoPromise._PROMISE_STATUS_PENDING;/**
   * 成功执行时 传给 resolve函数的参数
   *
   * @memberof MaoPromise
   */
  _value =undefined;/**
   * 失败执行时 传给 reject函数的参数
   *
   * @memberof MaoPromise
   */
  _reason =undefined;/**
   * 成功执行的回调函数
   *
   * @memberof MaoPromise
   */
  _onFulfilledCallback =[];/**
   * 失败执行的回调函数
   *
   * @memberof MaoPromise
   */
  _onRejectedCallback =[];/**
   * Creates an instance of MaoPromise.
   * @param {Function} executor 执行器
   * @memberof MaoPromise
   */constructor(executor){try{executor(this.resolve,this.reject);}catch(err){this.reject(err);}}/**
   * 静态方法resolve，返回一个执行成功回调的promise对象
   *
   * @static
   * @param {*} value 执行成功回调resolve的参数
   * @return {MaoPromise} 
   * @memberof MaoPromise
   */staticresolve(value){returnnewMaoPromise((resolve)=>resolve(value));}/**
   * 静态方法reject 返回一个指向reject回调的promise对象
   *
   * @static
   * @param {*} reason 执行reject回调的参数
   * @return {MaoPromise} 
   * @memberof MaoPromise
   */staticreject(reason){returnnewMaoPromise((resolve, reject)=>reject(reason));}/**
   *
   * 静态方法 执行promise数组内的全部的promise，全都执行完 且都是成功执行回调 
   * 则执行 resolve回调，且参数为全部成功执行promise元素的回调函数resolve的参数的数组。一旦有一个promise元素执行了reject或者抛出异常，则终止执行且立刻执行reject回调
   * @static
   * @param {Array<MaoPromise>} promises 是一个promise数组
   * @return {*} 
   * @memberof MaoPromise
   */staticall(promises){returnnewMaoPromise((resolve, reject)=>{const values =[];
      promises.forEach(promise=>{
        promise.then(res=>{
          values.push(res);if(values.length === promises?.length)resolve(values);},err=>reject(err));});});}/**
   *
   * allSettled 返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。
   * @static
   * @param {Array<MaoPromise>} promises 是一个promise数组
   * @return {*} 
   * @memberof MaoPromise
   */staticallSettled(promises){returnnewMaoPromise((resolve)=>{const result =[];
      promises.forEach(promise=>{
        promise.then(res=>{
          result.push({
            status: MaoPromise._PROMISE_STATUS_FULFILLED,
            value: res
          });if(result.length === promises?.length)resolve(result);},err=>{
          result.push({
            status: MaoPromise._PROMISE_STATUS_REJECTED,
            reason: err
          });if(result.length === promises?.length)resolve(result);});})});}/**
   *
   * promise数组的元素 有一个promise拿到了结果，无论是成功还是失败，都直接结束
   * @static
   * @param {Array<MaoPromise>} promises  是一个promise数组
   * @memberof MaoPromise
   */staticrace(promises){returnnewMaoPromise((resolve, reject)=>{
      promises.forEach(promise=>{
        promise.then(resolve, reject);});});}/**
   * 
   * 只要其中的一个 promise 成功，就返回那个已经成功的 promise 。
   * 如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），
   * 就返回一个失败的 promise 和AggregateError类型的实例，
   * 它是 Error 的一个子类，用于把单一的错误集合在一起。
   * 本质上，这个方法和Promise.all()是相反的。
   * @static
   * @param {Array<MaoPromise>} promises  是一个promise数组
   * @return {*} 
   * @memberof MaoPromise
   */staticany(promises){returnnewMaoPromise((resolve, reject)=>{const reasons =[];
      promises.forEach(promise=>{
        promise.then(resolve,err=>{
          reasons.push(err);if(reasons.length === promises?.length)reject(newAggregateError(reasons));});});});}/**
   * 成功时执行
   *
   * @param {*} value
   * @memberof MaoPromise
   */resolve=(value)=>{if(this._status === MaoPromise._PROMISE_STATUS_PENDING){// 延迟执行  queueMicrotask函数 将回调函数的内容加入到微任务中执行queueMicrotask(()=>{if(this._status !== MaoPromise._PROMISE_STATUS_PENDING)return;this._value = value;this._status = MaoPromise._PROMISE_STATUS_FULFILLED;// 执行成功回调this._onFulfilledCallback.forEach(callback=>{callback(this._value);});});}}/**
   * 失败时执行
   *
   * @param {*} reason
   * @memberof MaoPromise
   */reject=(reason)=>{if(this._status === MaoPromise._PROMISE_STATUS_PENDING){queueMicrotask(()=>{if(this._status !== MaoPromise._PROMISE_STATUS_PENDING)return;this._reason = reason;this._status = MaoPromise._PROMISE_STATUS_REJECTED;// 执行失败回调this._onRejectedCallback.forEach(callback=>{callback(this._reason);});});}}/**
   * then方法
   *
   * @param {*} onFulfilled 成功回调
   * @param {*} onRejected 失败回调
   * @memberof MaoPromise
   */then(onFulfilled, onRejected){// 如果 onRejected函数没有传 想要在catch方法中传回调// TODO  那么如果传入了onRejected回调，又使用catch进行捕获会如何？
    onRejected = onRejected ??(err=>{throw err });// 如果第一个then的resolve函数有返回值，且链式调用过程后面出现的是catch// 则成功回调函数是 undefined，也就是返回值不会被处理//  所以我们需要在调用catch的时候，将上一个resolve的结果返回出去// 如果不给 onFulfilled赋值，则catch后面链式调用里面的回调函数都不会执行
    onFulfilled = onFulfilled ??(value=> value);returnnewMaoPromise((resolve, reject)=>{// TODO 执行then函数的时候，状态已经确定了，则直接执行成功回调函数if(this._status === MaoPromise._PROMISE_STATUS_FULFILLED){if(typeof onFulfilled ==="function"){this._executorFunctionWithCatchError(onFulfilled,this._value, resolve, reject);}}elseif(this._status === MaoPromise._PROMISE_STATUS_REJECTED){if(typeof onRejected ==="function"){this._executorFunctionWithCatchError(onRejected,this._reason, resolve, reject);}}else{// pending 状态// TODO  副作用函数的返回值 作为then函数返回值promise的(resolve,reject)的参数// 状态还没确定之前 搜集副作用 在状态改变之后 一起执行if(typeof onFulfilled ==="function")// 为了收集到副作用执行后的返回值 我们将副作用函数放到新的函数中 然后加入到副作用数组中this._onFulfilledCallback.push(()=>{this._executorFunctionWithCatchError(onFulfilled,this._value, resolve, reject);});if(typeof onRejected ==="function")this._onRejectedCallback.push(()=>{this._executorFunctionWithCatchError(onRejected,this._reason, resolve, reject);});}});}/**
   * catch方法的设计 巧妙的用了then方法，
   * 但是考虑到我们可能会在catch方法后面，
   * 链式的调用finally方法，所以需要将调用的then方法的返回值 继续返回
   *
   * @param {*} onRejected 失败/异常处理回调
   * @memberof MaoPromise
   */catch(onRejected){returnthis.then(undefined, onRejected);}/**
   * 最终执行promise的善后工作的代码
   *
   * @param {*} onFinally 最终回调
   * @memberof MaoPromise
   */finally(onFinally){// 还是借用then方法，不管成功还是失败/异常 都会执行最终回调if(typeof onFinally ==="function")this.then(()=>{onFinally();},()=>{onFinally();});}/**
   * 执行副作用函数 进行异常的捕获处理
   *
   * @param {*} execFn 副作用函数
   * @param {*} value 上一个回调函数(resolve,reject)执行时传入的参数
   * @param {*} resolve 成功回调
   * @param {*} reject 失败回调
   * @memberof MaoPromise
   */_executorFunctionWithCatchError(execFn, value, resolve, reject){try{const res =execFn(value);resolve(res);}catch(err){reject(err);}}}// MaoPromise.reject("err or").catch((err) => {//   console.log(err);// }).finally(() => {//   console.log("finally");// });const p1 =newMaoPromise((resolve, reject)=>{setTimeout(()=>{resolve(111);},1000);});const p2 =newMaoPromise((resolve, reject)=>{setTimeout(()=>{reject(222);},2000);});const p3 =newMaoPromise((resolve, reject)=>{setTimeout(()=>{resolve(333);},3000);});
MaoPromise.any([p2]).then((res)=>{
  console.log(res);}).catch(err=>{
  console.log(err.errors);})