如何遍历游戏ID数组，通过Axios批量调用API获取单场比赛上场时长？

我猜你大概率是遇到了异步流程控制的问题——比如用forEach遍历的时候，Axios的请求都是异步的，forEach不会等待每个请求完成就继续执行下一个，导致你没法按顺序处理结果，或者没法在所有请求完成后统一做后续操作？别担心，这是异步编程里很常见的坑，我给你几个靠谱的解决方案：

方法1：用for...of（顺序执行，适合怕接口限流的场景） #

for...of可以配合await，让每个API请求完成后再发起下一个，完美解决forEach不等待异步操作的问题，而且代码逻辑非常直观：

const axios = require('axios'); // 前端项目可以用 import axios from 'axios';

async function fetchMatchPlayTimes(matchList) {
  const processedMatches = [];
  
  for (const match of matchList) {
    try {
      // 替换成你的实际API地址
      const response = await axios.get(`/api/matches/${match.id}/play-duration`);
      // 把获取到的时长和原比赛数据合并
      processedMatches.push({
        ...match,
        playDuration: response.data.duration // 假设接口返回的时长字段是duration
      });
    } catch (error) {
      // 单个请求失败时的处理，比如记录错误或给默认值
      console.error(`获取比赛ID ${match.id} 时长失败:`, error.message);
      processedMatches.push({
        ...match,
        playDuration: null,
        error: error.message
      });
    }
  }
  
  return processedMatches;
}

// 你的比赛数组示例
const matches = [
  { id: 1, name: 'Team 1 vs Team 2' },
  { id: 2, name: 'Team 1 vs Team 2' },
  { id: 3, name: 'Team 1 vs Team 2' },
  { id: 4, name: 'Team 1 vs Team 2' },
  { id: 5, name: 'Team 1 vs Team 2' }
];

// 调用函数并处理结果
fetchMatchPlayTimes(matches).then(result => {
  console.log('所有比赛时长数据:', result);
  // 这里可以做渲染、存储等后续操作
});

方法2：用Promise.allSettled（并行执行，效率更高） #

如果你的API允许并发请求，用这种方法可以同时发起所有请求，比顺序执行快很多。Promise.allSettled会等待所有请求完成，不管成功还是失败，适合需要获取全部结果的场景：

const axios = require('axios');

async function fetchPlayTimesInParallel(matchList) {
  // 把每个比赛的请求转换成Promise
  const requestPromises = matchList.map(match => 
    axios.get(`/api/matches/${match.id}/play-duration`)
      .then(res => ({
        ...match,
        playDuration: res.data.duration,
        status: 'success'
      }))
      .catch(err => ({
        ...match,
        playDuration: null,
        status: 'failed',
        errorMsg: err.message
      }))
  );

  // 等待所有请求完成
  const results = await Promise.allSettled(requestPromises);
  // 提取每个请求的结果值
  return results.map(item => item.value || item.reason);
}

// 使用示例
fetchPlayTimesInParallel(matches).then(result => {
  console.log('并行请求结果:', result);
});

为什么forEach搞不定？ #

简单说：forEach的回调函数里用await的话，forEach本身完全不会理会这个await，它会立刻执行下一个回调。比如你写这样的代码：

matches.forEach(async match => {
  const data = await axios.get(`/api/matches/${match.id}/play-duration`);
  console.log(data);
});
console.log('所有请求完成');

你会发现console.log('所有请求完成')会在所有API请求返回之前就打印出来，而且你没法统一收集所有请求的结果——因为每个异步回调都是独立的，forEach不会帮你管理这些异步任务的状态。

内容的提问来源于stack exchange，提问作者Sebastian Berglönn