手写promise，promise.all，promise.race

最新推荐文章于 2025-05-14 20:21:16 发布

Mpixer

最新推荐文章于 2025-05-14 20:21:16 发布

阅读量304

点赞数 2

文章标签： javascript vue.js html5

本文链接：https://blog.youkuaiyun.com/qq_58191475/article/details/120577830

版权

本文介绍了如何手写Promise的基本构造和实现，包括状态管理、then方法的处理以及Promise.all和Promise.race的实现。通过实例展示了如何创建并使用自定义Promise处理异步操作，深入理解Promise的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手写promise

  //手写promise
  const RESOLVE = 'resolved';//成功状态
  const REJECT = 'rejected'//失败状态
  const PENDING = 'Pending'//等待状态

  class MyPromise {
   status = PENDING;
   result = undefined
   reason = undefined
    onResolvedArr = []
    onRejectArr = []
   constructor(excution) {//promise中传入一个函数，我们定义一个excution函数
     //定义resolve与reject两个参数
     const resolve =(result) =>{//resolve中传入参数result
       if(this.status === PENDING){//promise中状态改变不可逆向，只能从PENDING转为RESOLVE或者PENDING转为REJECT
         this.result = result
         this.status = RESOLVE
         this.onResolvedArr.map((fn)=>fn())
       }
     }
     const reject =(reason) =>{//reject传入参数reason
       if (this.status === PENDING){
         this.reason = reason
         this.status = REJECT
         this.onRejectArr.map((fn)=>fn())
       }

     }
     excution(resolve,reject)//传入reslove，reject 2个参数
   }
    //传入promise的then方法
   then(onResoved,onRejected){
     if (this.status === RESOLVE){
       //利用settimeout把任务变为异步任务
       setTimeout(()=>{
         onResoved(this.result)
       },0)

     }
     if (this.status === REJECT){
       setTimeout(()=>{
         onRejected(this.reason)
       },0)
     }
     //加入promise中传入一个异步的函数，通过发布订阅模式来实现监听
     if(this.status === PENDING){
       this.onResolvedArr.push(() => {
         onResoved(this.result)
       })
       this.onRejectArr.push(() => {
         onRejected(this.reason)
       })
     }
   }
  }
//应用
  const  test = new MyPromise((resolve,reject)=>{
    setTimeout(()=>{
      resolve('hello world')
    },1000)
  })
  test.then((res) => {
    console.log(res)
  })
  console.log(1111)

手写promise.all

  Promise.all = function (iterator) {//promise.all传入的为一个迭代器
    const promises = Array.from(iterator)//将迭代器转化成数组
    let count = 0
    let res = []//储存结果
    return new Promise((resolve,reject)=>{//promise.all返回一个promise对象
      for (let i in promises){//对传入的数据进行遍历
        Promise.resolve(promises[i])//将传入的数据每个都转化成promise对象
        .then((data)=>{
          res[i] = data//调用成功存入res中
          if (++count === promises.length){//每次调用成功累加count，当count等于promises的长度，就表明每次都调用成功
            resolve(res)//则返回resolve
          }
        })
        .catch((e)=>{//当count不等于promises的长度则表示其中有失败的调用，则放回reject
          reject(e)
        })
      }
    })
  }

手写promise.race（与all同理，不需要判断）

     Promise.race = function (iterator) {
    const promises = Array.from(iterator)
    return new Promise((resolve,reject) => {
      for (let i in promises) {
        Promise.resolve(promises[i])
            .then((res) => {
              resolve(res)
            })
            .catch(e => {
              reject(e)
            })
      }

    })
  }