深入了解 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 实例结束后返回结果,无论是成功还是失败。

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

相关推荐
爱上妖精的尾巴8 分钟前
8-5 WPS JS宏 match、search、replace、split支持正则表达式的字符串函数
开发语言·前端·javascript·wps·jsa
小温冲冲10 分钟前
通俗且全面精讲单例设计模式
开发语言·javascript·设计模式
意法半导体STM3240 分钟前
【官方原创】FDCAN数据段波特率增加后发送失败的问题分析 LAT1617
javascript·网络·stm32·单片机·嵌入式硬件·安全
为什么不问问神奇的海螺呢丶41 分钟前
n9e categraf redis监控配置
前端·redis·bootstrap
云飞云共享云桌面41 分钟前
推荐一些适合10个SolidWorks设计共享算力的服务器硬件配置
运维·服务器·前端·数据库·人工智能
咔咔一顿操作1 小时前
轻量无依赖!autoviwe 页面自适应组件实战:从安装到源码深度解析
javascript·arcgis·npm·css3·html5
刘联其1 小时前
.net也可以用Electron开发跨平台的桌面程序了
前端·javascript·electron
韩曙亮1 小时前
【jQuery】jQuery 选择器 ④ ( jQuery 筛选方法 | 方法分类场景 - 向下找后代、向上找祖先、同级找兄弟、范围限定查找 )
前端·javascript·jquery·jquery筛选方法
前端 贾公子1 小时前
Node.js 如何处理 ES6 模块
前端·node.js·es6
pas1361 小时前
42-mini-vue 实现 transform 功能
前端·javascript·vue.js