调用Twitch API时，循环内数组正常循环外为空的问题求助

这个问题的核心原因是Twitch API的请求是异步操作，而你的for循环是同步执行的——循环会先一口气跑完所有请求的触发，然后才会陆续收到API的响应并往数组里加数据。而循环外的console.log(arr)会在所有异步请求的回调执行前就运行，这时候数组自然是空的。

下面给你两种常用的解决方法，你可以根据自己的需求选择：

方法一：用async/await实现串行请求 #

这种方式会让每个请求完成后再发起下一个，适合需要按顺序处理请求的场景，代码可读性也很高：

// 把逻辑包在async函数里
async function getUserDataList() {
  const userArr = [];
  // 假设这是你的用户列表
  const userList = ['user1', 'user2', 'user3', 'user4'];

  for (const username of userList) {
    try {
      // 等待当前请求完成再继续
      const response = await fetch(`https://api.twitch.tv/helix/users?login=${username}`);
      const userData = await response.json();
      userArr.push(userData);
      console.log('当前数组:', userArr); // 每次请求完成后数组都会新增元素
    } catch (err) {
      console.error(`获取用户 ${username} 数据失败:`, err);
    }
  }

  // 循环结束时，所有请求都已经完成，数组有完整数据
  console.log('最终数组:', userArr);
  return userArr;
}

// 调用函数
getUserDataList();

方法二：用Promise.all实现并行请求 #

如果不需要严格按顺序发起请求，这种方式效率更高——它会一次性发起所有请求，然后等待全部响应后统一处理结果：

const userList = ['user1', 'user2', 'user3', 'user4'];

// 先为每个用户创建一个请求Promise
const userRequestPromises = userList.map(username => {
  return fetch(`https://api.twitch.tv/helix/users?login=${username}`)
    .then(res => res.json())
    .catch(err => {
      console.error(`用户 ${username} 请求失败:`, err);
      return null; // 请求失败时返回null，避免影响整体Promise.all
    });
});

// 等待所有Promise完成
Promise.all(userRequestPromises)
  .then(results => {
    // 过滤掉请求失败的null结果
    const userArr = results.filter(data => data !== null);
    console.log('最终数组:', userArr);
  })
  .catch(err => {
    console.error('批量请求出现异常:', err);
  });

为什么原来的写法不行？ #

举个例子，你原来的代码大概是这样的：

const arr = [];
const userList = ['user1', 'user2'];

for (let i = 0; i < userList.length; i++) {
  fetch(`https://api.twitch.tv/helix/users?login=${userList[i]}`)
    .then(res => res.json())
    .then(data => {
      arr.push(data);
      console.log(arr); // 这里打印时，是异步回调执行，数组已经有元素了
    });
}

console.log(arr); // 这里执行时，所有fetch的回调都还没跑，所以数组是空的

同步的for循环会先执行完两次fetch调用，然后才会进入事件循环处理API的响应回调，而循环外的console.log在循环结束后立刻执行，早于所有回调，所以数组为空。

内容的提问来源于stack exchange，提问作者Cdhippen