JavaScript原生实现的promise、promiseAll、promiseRace方法

1.简单实现promise

//手写实现promise,promiseAll,promiseRace

function myPromise(excutor){
  this.status = 'pending'         //初始状态
  this.value = null               //存储传入的参数值
  this.onResolveCallbacks = []    //成功回调的任务对列
  this.onRejectCallbacks = []     //失败回调的任务队列

  const resolve = (val) => {      //resolve函数
    this.status = 'fulfilled'     //将状态改为resolve
    this.value = val              //接收形参
    this.onResolveCallbacks.forEach(fn => fn()) //循环执行成功回调队列里的每个回调函数
  }
  const reject = (val) => {       //reject函数
    this.status = 'rejected'      //将状态改为rejected
    this.value = val              //接收形参
    this.onRejectCallbacks.forEach(fn => fn())  //循环执行失败回调队列里的函数
  }

  try{
    excutor(resolve,reject)       //立刻执行excutor
  }catch{
    reject(err)                   //抛出错误
  }
}

myPromise.prototype.then = function(onResolve, onReject){
  switch(this.status){
    case 'fulfilled':onResolve(this.value);break;     //有resolve直接执行
    case 'rejected':onReject(this.value);break;       //有reject直接执行
    case 'pending':
      this.onResolveCallbacks.push(() => onResolve(this.value)) //没有任何,将回调加入回调队列
      this.onRejectCallbacks.push(() => onReject(this.value))
      break;
  }
  return this       //重新返回this
}

2.简单实现promiseAll

function myPromiseAll(promise){
  promise = Array.from(promise)       //将promise转为数组
  return new Promise((resolve, reject) => {   //返回一个new的promise
    if(promise.length === 0){         //promise为空时,直接处理[]
      return resolve([])  
    }else{      
      let result = []
      let index = 0
      for(let i=0; i<promise.length; i++){    //循环处理每个
        Promise.resolve(promise[i]).then(res => { //处理成功进入
          result[i] = res                     //奖处理成功的结果放入
          index++                             
          if(index == promise.length){        //计算所有的是否都处理完毕
            return resolve(result)            //处理完返回结果
          }
        },err => {
          return reject(err)                  //有错误立刻执行错误
        })
      }
    }
  })
}

3.简单实现promiseRace

function myPromiseRace(promise){
  promise = Array.from(promise)
  return new Promise((resolve, reject) => {
    if(promise.length == 0){
      return resolve([])
    }else{
      for(let i=0; i<promise.length; i++){
        Promise.resolve(promise[i]).then(res => { //执行一个输出一个,不论是否成功
          return resolve(res)
        }, err => {
          return reject(err)
        })
      }
    }
  })
}

 

posted @ 2021-03-12 10:37  xiaoxu1024  阅读(190)  评论(0)    收藏  举报