深入了解 JavaScript 中的 Promise 相关方法:all、race 和 allSettled

在 JavaScript 开发中,处理异步操作是很常见的需求。随着 ECMAScript 6(ES6)的引入,Promise 成为了处理异步操作的主要方式之一。而在 Promise 的方法中,Promise.all()Promise.race()Promise.allSettled() 是一些非常有用的工具,它们在处理异步操作时有各自的特点和用途。本文将介绍这三个方法的用法、示例以及区别,帮助读者更好地理解和应用它们。

Promise.all()

Promise.all() 方法接收一个 Promise 实例数组作为参数,并返回一个新的 Promise 实例。这个新的 Promise 实例会在传入的所有 Promise 实例都已经成功完成(resolved)时才会被解决(resolve),如果其中有任何一个 Promise 实例被拒绝(rejected),它就会立即将该拒绝的值传递给它的回调函数,并且 Promise.all() 返回的 Promise 实例也会被拒绝。

使用示例:

js 复制代码
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 已完成');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 已完成');
  }, 2000);
});

Promise.all([promise1, promise2])
  .then(values => {
    console.log(values);
    // 输出:['Promise 1 已完成', 'Promise 2 已完成']
  })
  .catch(error => {
    console.error(error);
  });

Promise.race()

Promise.race() 方法接收一个 Promise 实例数组作为参数,返回一个新的 Promise 实例。这个新的 Promise 实例会在传入的 Promise 实例中有一个率先解决(resolve)或拒绝(reject)时解决或拒绝,并且它的状态和值会与率先解决或拒绝的 Promise 相同。通常用于设置超时操作,或者在多个请求中只需要获取其中一个结果的情况下。

使用示例:

js 复制代码
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 已完成');
  }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 已完成');
  }, 1000);
});

Promise.race([promise1, promise2])
  .then(value => {
    console.log(value);
    // 输出:'Promise 2 已完成',因为 promise2 较快完成
  })
  .catch(error => {
    console.error(error);
  });

Promise.allSettled()

Promise.allSettled() 方法接收一个 Promise 实例数组作为参数,返回一个新的 Promise 实例。这个新的 Promise 实例会在传入的所有 Promise 实例都已经解决(无论是成功还是失败)后解决,并返回一个包含所有 Promise 结果的数组。不同于 Promise.all(),它不会在有 Promise 被拒绝时立即拒绝整个 Promise 链,而是等待所有 Promise 结束后返回结果。

使用示例:

js 复制代码
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 已完成');
  }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise 2 失败了');
  }, 1000);
});

Promise.allSettled([promise1, promise2])
  .then(results => {
    console.log(results);
    /* 输出:
    [
      { status: 'fulfilled', value: 'Promise 1 已完成' },
      { status: 'rejected', reason: 'Promise 2 失败了' }
    ]
    */
  });

区别与总结

  • Promise.all() 会在所有 Promise 实例成功完成时才成功,一旦有一个失败就会立即失败。
  • Promise.race() 会在任何一个 Promise 实例率先成功或失败时返回结果。
  • Promise.allSettled() 则会等待所有 Promise 实例结束后返回结果,无论是成功还是失败。

这三个方法各有特点,根据实际需求选择合适的方法来处理异步操作,可以提高代码的可读性和性能。

相关推荐
Your易元31 分钟前
设计模式-状态模式
java·前端·算法·设计模式
网络点点滴3 小时前
将项目推到Github
javascript·github
HaanLen3 小时前
React19源码系列之 Hooks (useState、useReducer、useOptimistic)
服务器·前端
yuanyxh5 小时前
《精通正则表达式》精华摘要
前端·javascript·正则表达式
小飞大王6666 小时前
简单实现HTML在线编辑器
前端·编辑器·html
Jimmy6 小时前
CSS 实现卡牌翻转
前端·css·html
百万蹄蹄向前冲6 小时前
大学期末考,AI定制个性化考试体验
前端·人工智能·面试
向明天乄7 小时前
在 Vue 3 项目中集成高德地图(附 Key 与安全密钥申请全流程)
前端·vue.js·安全
sunshine_程序媛7 小时前
vue3中的watch和watchEffect区别以及demo示例
前端·javascript·vue.js·vue3
电商数据girl7 小时前
【经验分享】浅谈京东商品SKU接口的技术实现原理
java·开发语言·前端·数据库·经验分享·eclipse·json