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

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

相关推荐
Irene1991几秒前
insertAdjacentHTML() 详解
javascript·dom
HarrySunCn几秒前
大夏龙雀DX-CT511N-B实战之路-第1步
前端·单片机·物联网·iot
未来之窗软件服务9 分钟前
幽冥大陆(七十七)C# 调用 中文huayan-medium.onnx —东方仙盟练气期
前端·ui·c#·仙盟创梦ide·东方仙盟
古茗前端团队10 分钟前
用 NAudio 做一个音频播放器及原理
前端
成为大佬先秃头12 分钟前
渐进式JavaScript框架:Vue 工具 & 模块化 & 迁移
开发语言·javascript·vue.js
xiaoxue..13 分钟前
二叉搜索树 BST 三板斧:查、插、删的底层逻辑
javascript·数据结构·算法·面试
wei yun liang17 分钟前
4.数据类型
前端·javascript·css3
奥升新能源平台19 分钟前
奥升充电平台OCPP协议解析
前端
JinSo4 小时前
我的2025年度总结:EasyEditor
前端·程序员
喝拿铁写前端8 小时前
前端开发者使用 AI 的能力层级——从表面使用到工程化能力的真正分水岭
前端·人工智能·程序员