当前位置:首页 » 《随便一记》 » 正文

手写promise,promise.all,promise.race_Mpixer的博客

10 人参与  2022年02月23日 16:32  分类 : 《随便一记》  评论

点击全文阅读


手写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)
            })
      }

    })
  }


点击全文阅读


本文链接:http://zhangshiyu.com/post/35268.html

传入  手写  调用  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1