手动实现一个简易Promise.all和Promise.race

最新推荐文章于 2025-04-15 09:48:06 发布

小乖～

最新推荐文章于 2025-04-15 09:48:06 发布

阅读量640

点赞数

分类专栏：前端小芝士

本文链接：https://blog.youkuaiyun.com/weixin_43199838/article/details/108031710

版权

前端小芝士专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何手动实现Promise.all和Promise.race。通过示例展示了如何创建一个简易的Promise.all，处理传入的Promise数组，并对比了原生实现。同时提到了可以通过增加isPromise函数来优化，确保传入的是Promise对象。接着讨论了Promise.race的实现，它会立即执行数组中第一个变为决议状态的Promise。

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

手写一个简易Promise.all

let allPromise = function (arr) {
//存储结果
  let results = []
  //要可以实现then和catch等，自然就是返回Promise结构
  return new Promise((reslove, reject) => {
    for (let i = 0; i < arr.length; i++) {
      arr[i].then(data => {
        results.push(data)
        //如果不是全部都为resolve，那就不会在这里运行resolve
        if (results.length === arr.length) {
          reslove(results)
        }
      }, reject)
    }
  })
}
//创建三个Promise
const a = new Promise(function (resolve, reject) {
  resolve('a resolve');
});
const b = new Promise(function (resolve, reject) {
  resolve('b resolve');
});
const c = new Promise(function (resolve, reject) {
  resolve('c resolve');
});
//原装的看一下结果
Promise.all([a, b, c]).then(res => {
  console.log(res + '  1');
}).catch(err => {
  console.log(err + '  1');
})
//结果：
//a resolve,b resolve,c resolve  1

//手写的看一下结果
allPromise([a, b, c]).then(res => {
  console.log(res + '  2');
}).catch(err => {
  console.log(err + '  2');
})
//结果：
//a resolve,b resolve,c resolve  2

然后改一下Promise c，改成运行reject。看下原装和手写的结果：

const c = new Promise(function (resolve, reject) {
  reject('c resolve');
});

Promise.all([a, b, c]).then(res => {
  console.log(res + '  1');
}).catch(err => {
  console.log(err + '  1');
})
//c resolve  1
allPromise([a, b, c]).then(res => {
  console.log(res + '  2');
}).catch(err => {
  console.log(err + '  1');
})
//c resolve  2

以上证明可完美实现。不过优化的话，可以从传入的值是不是都是Promise函数进行优化，做一个isPromise（）的函数，验证，如果是的话进入同上环节，如果不是就直接压进results中。（results.push(arr[i])）
为了增强健壮性，还可以对传入的数组进行判断，是不是数组？（isArray()）

手写一个Promise.race

race是哪个先出结果就执行哪个，即哪个状态改变的最快就执行哪个

let racePromise = arr => {
  return new Promise((resolve, reject) => {
    arr.forEach(promise => {
      promise.then(resolve, reject)
    })
  })
}
// 通过定时器来控制那个状态率先改变
let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 400)
})
let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

const p = racePromise([p1, p2])

p.then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})
//如果P1设定的事件小于P2那么输出:success
//如果P1设定的事件大于P2那么输出:failed