如何使用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 实际项目模板吗?你复制就能用在项目里。

相关推荐
2分钟速写快排6 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60617 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角8 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!8 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰8 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi10 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen11 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马11 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒12 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端
乘风gg12 小时前
DeepSeek V4.1 Flash 来了,明天中午 Flash 降价 60%
前端·ai编程·claude