手写bind_手写Promise/Promise.all/Promise.race（手写系列一）-CSDN博客

本文链接：https://blog.csdn.net/weixin_39659748/article/details/111388185

背景

几个月没写文章了，愧对关注本专栏的小伙伴。最近有同学提议我出一个手写系列的文章对常见对前端工具、框架、设计模式做一个覆盖。同时有个要求：代码要尽量短小易懂，并且体现原理，让学习者学习过后能在未来面试中当场手写出来。我觉得提议很好，主要是觉得目前技术社区里造轮子系列的文章都及其专业(又臭又长)，即使勉强看懂，在面试官的注视下也很难在10～30分钟内从0手写出来，小伙伴们需要那种只有几十行甚至十几行的代码的轮子。

以下是手写系列内容预告，初步计划一周一个主题。

手写Promise、Promise.all、Promise.race
手写发布订阅模式
手写简易Redux
手写简易模块加载器
手写简易模块打包器
手写简易React
手写简易React Hooks
手写简易JQuery
......(根据小伙伴的提议待定)

手写Promise

class Promise2 {
  succeed = null
  fail = null
  state = 'pending' 

  constructor(fn) {
    fn(this.resolve.bind(this), this.reject.bind(this))
  }
  
  resolve(result) {
    setTimeout(() => {
      this.state = 'fulfilled' 
      this.succeed(result)
    })
  }

  reject(reason) {
    setTimeout(() => {
      this.state = 'rejected' 
      this.fail(reason)
    })
  }

  then(succeed, fail) {
    this.succeed = succeed
    this.fail = fail
  }
}

关于Promise的原理和用法这里不再赘述，以上实现是极简版，未实现级联和catch。

手写 Promise.all

方法返回一个Promise实例，此实例在 iterable 参数内所有的promise 都完成（resolved）时回调完成（resolve）；如果参数中 promise有一个失败（rejected），此实例回调失败（reject），失败的原因是第一个失败promise的结果。

Promise2.all = function(arrP) {
  let list = []
  let len = 0
  let hasErr = false
  return new Promise2((resolve, reject) => {
    for(let i = 0; i < arrP.length; i++) {
      arrP[i].then( data=> {
        list[i] = data
        len++
        len === arrP.length && resolve(list)
      }, error => {
        !hasErr && reject(error)
        hasErr = true
      })
    }
  })
}

手写Promise.race

方法返回一个Promise实例，一旦迭代器中的某个 promise 完成(resolved)或失败(rejected)，返回的 promise 就会 resolve 或 reject

Promise2.race = function(arrP) {
  let hasValue = false
  let hasError = false
  return new Promise2((resolve, reject) => {
    for(let i = 0; i < arrP.length; i++) {
      arrP[i].then(data => {
        !hasValue && !hasError && resolve(data) 
        hasValue = true
      }, error => {
        !hasValue && !hasError &&reject(error)
        hasError = true
      })
    }
  })
}

测试代码

new Promise2((resolve, reject) => {
  let [val, time] = [Math.random(), Math.random() * 1000]
  setTimeout(() => {
    val>0.2?resolve(val):reject(val)
  }, time)
}).then(
  val => console.log('promise 测试:' , val), 
  err => console.error('promise 测试:'+ err)
)

const getPList = () => {
  let arrP = []
  for(let i=0; i< 10; i++) {
    arrP[i] = new Promise2((resolve, reject) => {
      let [v, t] = [Math.random(), Math.random() * 1000]
      setTimeout(() => {
        v > 0.1 ? resolve(v) : reject(v)
      }, t)
    })
  }
  return arrP
}

Promise2.all(getPList()).then(
  data => console.log('promise.all 测试:', data),
  err => console.error('promise.all 测试:'+ err)
)


Promise2.race(getPList()).then(
  data => console.log('promise.race 测试:', data), 
  err => console.error('promise.race 测试:' + err)
)

如果觉得有用，点个赞让作者开心一下呗～