【💎魔仙带你手撕Promise.all/race修炼成仙🧚‍♀️】

Promise 一个对象 一种异步操作方法 链式调用解决了回调地狱问题

三种状态 待定pending resolve对应完成✅fulfilled reject对应拒绝❌rejected

Promise手写 够用啦👩‍❤️‍👩

function myPromise(constructor){
   let self = this;
    self.status = 'pending';
    self.value = undefined;
    self.reason = undefined;
    function resolve(value){
       if(self.status === 'pending'){
        self.value = value
        self.status = 'fullfilled'
       }
    }
    function reject(reason){
       if(self.status === 'pending'){
        self.reason = reason
        self.status = 'rejected'
       }
    }
    try{
      constructor(resolve,reject)
    }catch(e){
       reject(e)
    }
}
myPromise.prototype.then = function(onFullfilled,onRejected){
   let self = this
   switch(self.status){
     case 'fullfilled':
        onFullfilled(self.value)
        break;
     case 'rejected':
        onRejected(self.reason)
        break;
     default:
   }
  
}

Promise.all 把对个promise方法组合在一起 传入的参数为可迭代对象 如数组

如果有一个Promise失败 就失败 全部请求成功才会走成功的逻辑

一起手写Promise.all修炼
Promise.all = function(promises){
  return new Promise((resolve,reject) =>{
     let result = [],
         index = 0,
         len = promises.length;
      if(len === 0){
         resolve(result)
         return
      }
      
      for(let i = 0;i < len; i++){
         Promise.resolve(promises[i]).then( data => {
            result[i] = data
            index++
            if(index === len) return resolve(result)
         }).catch(err => {
           reject(err)
         })
      }
  })
}

Promise.allSettled 跟all方法传参一致 区别是 无论成功与否 会返回每一个promise方法的返回值

Promise.any 一样 只要有一个成功了就反回成功的值 状态变为fulfilled

Promise.race 谁的状态先改变 就返回谁 可以用于判断图片是否加载成功

Promise.race 超超简单
Promise.race = function(promises){
 return new Promise((resolve,reject) => {
    let len = promises.length
    if(len === 0) return
    for(let i=0;i<len;i++){
       Promise.resolve(promises[i]).then(data=>{
          resolve(data)
          return
       }).catch(err =>{
         reject(err)
         return
       }
       )
      
    }
 })
}