如何使用Promise.any()处理多个异步操作?

我用最简单、最实用、能直接复制到项目里 的方式,教你怎么用​Promise.any() ​​ 处理多个异步请求,一步到位看懂。

一、先记住核心规则(最重要)

​Promise.any()​​ 接收一个Promise 数组,作用只有两个:

  1. 只要有一个成功,就立刻返回这个成功的结果
  2. 全部都失败,才会进入失败(返回错误集合)

一句话:抢第一个成功的结果


二、最基础用法(直接复制就能用)

javascript 复制代码
// 模拟 3 个异步请求
const p1 = new Promise((resolve, reject) => setTimeout(reject, 100, '请求1失败'))
const p2 = new Promise((resolve, reject) => setTimeout(resolve, 200, '请求2成功'))
const p3 = new Promise((resolve, reject) => setTimeout(reject, 300, '请求3失败'))

// 使用 Promise.any()
Promise.any([p1, p2, p3])
  .then(result => {
    // 只要有一个成功,就走这里
    console.log('最先成功的结果:', result)
  })
  .catch(err => {
    // 全部失败才走这里
    console.log('所有请求都失败了')
  })

输出:

复制代码
最先成功的结果:请求2成功

三、真实项目场景:多个接口取最快可用的

这是 最常用的场景 : 你有多个备用接口,哪个先通就用哪个

javascript 复制代码
// 定义多个接口请求
async function fetchApi1() {
  const res = await fetch('https://api1.com/data')
  return res.json()
}

async function fetchApi2() {
  const res = await fetch('https://api2.com/data')
  return res.json()
}

async function fetchApi3() {
  const res = await fetch('https://api3.com/data')
  return res.json()
}

// 同时请求,谁先成功用谁
async function getData() {
  try {
    const result = await Promise.any([
      fetchApi1(),
      fetchApi2(),
      fetchApi3()
    ])
    console.log('可用数据:', result)
  } catch (err) {
    console.log('所有接口都挂了')
  }
}

getData()

四、如果全部失败了怎么办?

​Promise.any()​​ 会抛出 AggregateError(错误集合)。

你可以拿到所有错误信息

javascript 复制代码
const p1 = Promise.reject('错误1')
const p2 = Promise.reject('错误2')
const p3 = Promise.reject('错误3')

Promise.any([p1, p2, p3])
  .catch(err => {
    console.log(err) // AggregateError
    console.log(err.errors) // [ '错误1', '错误2', '错误3' ]
  })

五、必须记住:和 race() 的区别(面试常问)

  • Promise.race() :谁先完成就返回谁,失败也算
  • Promise.any() :只返回第一个成功的,失败会被跳过

例子一眼看懂:

typescript 复制代码
const p1 = Promise.reject('失败')
const p2 = Promise.resolve('成功')

Promise.race([p1, p2]).catch(e => console.log(e)) // 失败(因为p1更快)
Promise.any([p1, p2]).then(res => console.log(res)) // 成功(只看成功)

六、总结(最简单记忆)

  • 用来做什么 :同时发多个异步,取第一个成功的结果
  • 什么时候用:接口容灾、多线路优选、抢最快响应
  • 成功条件:任意一个成功
  • 失败条件:全部失败
  • 错误类型​AggregateError​

需要我给你写一个可直接运行的完整 axios + Promise.any 实际项目模板吗?你复制就能用在项目里。

相关推荐
不好听6133 小时前
从一行 JSX 到屏幕像素:前端开发者必须懂的浏览器渲染管线
前端
恒拓高科WorkPlus3 小时前
企业级内网即时通讯建设模型:BeeWorks内网IM四层架构
前端
前端小李子4 小时前
前端环境变量裸奔?我用 EnvShield 给它穿了件防弹衣
前端
youtootech4 小时前
HarmonyOS《柚兔学伴》项目实战25-我的页面、Web 嵌入与项目总结
前端·华为·harmonyos
小林ixn4 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
醇氧6 小时前
CountDownLatch / CyclicBarrier / Semaphore 面试高频问答清单
前端·面试·职场和发展
qetfw7 小时前
MXU:Tauri 2 + React 的 MaaFramework 跨平台 GUI 源码
前端·python·react.js·前端框架·开源项目·效率工具
甲维斯7 小时前
我要开始吹牛逼了!Kimi K3 “宇宙无敌”!
前端·人工智能
a1117767 小时前
微光小屋-前端养成小游戏 开源项目
前端