For循环内调用外部数据库API无法获取数据问题排查

你的猜测完全正确——核心问题就是异步请求的时序问题，再加上var声明变量带来的作用域陷阱，导致了items为空的情况。我来详细拆解并给出解决方案：

问题出在哪？ #

1. 异步请求的时序问题 #

$http.get是异步操作：当你调用它时，浏览器会发送请求，但不会等待API返回结果，而是直接执行后续代码。所以你在调用$http.get后立刻执行obj.push(items)时，items还没被API响应赋值，自然是空的。

2. var的作用域陷阱 #

你用var声明了iter、country等变量，var是函数级作用域，整个循环的所有迭代会共享同一个变量引用。等到API的then回调执行时，循环早已跑完，iter已经变成了countriesData.length，此时countriesData[iter]是undefined，也会导致后续逻辑出错。

怎么解决？ #

我们需要把依赖异步请求结果的代码放到回调内，同时解决变量作用域问题，这里有两种常用方案：

方案一：用forEach遍历数组（简单直观） #

forEach的每个迭代回调会创建独立作用域，完美解决var的作用域问题，同时把所有依赖API返回值的代码放到then回调中：

// 假设newData和myStats是已提前定义的变量
countriesData.forEach(country => {
  // 发起异步请求
  $http.get(`https://api.discogs.com/database/search?q={?country==${country}}&token=zwxZExVZTenjPTKumVeTDVRuniqhQLAxymdzSxUQ`)
    .then(response => {
      // 仅当API返回结果后，才执行后续逻辑
      const items = response.data.pagination.items;
      const obj = [];
      let itemsCountry = 0;
      let str = "";

      obj.push(country);
      obj.push(items);

      // 统计本地数据中的条目
      for (let J = 0; J < myStats.data.length; J++) {
        if (myStats.data[J].country === country) {
          itemsCountry++;
          str += myStats.data[J].title + ", ";
        }
      }

      obj.push(itemsCountry);
      // 处理str为空的情况，避免substring报错
      const str2 = str.length > 2 ? str.substring(0, str.length - 2) : "";
      obj.push(str2);

      newData.push(obj);
      console.log("new obj : " + obj);
    })
    .catch(error => {
      // 别忘了处理请求失败的情况
      console.error(`获取${country}数据失败:`, error);
    });
});

方案二：用Promise.all并行处理所有请求（效率更高） #

如果API允许并行请求，用Promise.all可以一次性发起所有请求，等全部完成后统一处理结果，适合需要等待所有数据加载完成再进行后续操作的场景：

// 先把每个国家的请求包装成Promise
const requestPromises = countriesData.map(country => {
  return $http.get(`https://api.discogs.com/database/search?q={?country==${country}}&token=zwxZExVZTenjPTKumVeTDVRuniqhQLAxymdzSxUQ`)
    .then(response => {
      const items = response.data.pagination.items;
      let itemsCountry = 0;
      let str = "";

      for (let J = 0; J < myStats.data.length; J++) {
        if (myStats.data[J].country === country) {
          itemsCountry++;
          str += myStats.data[J].title + ", ";
        }
      }

      const str2 = str.length > 2 ? str.substring(0, str.length - 2) : "";
      return [country, items, itemsCountry, str2];
    })
    .catch(error => {
      console.error(`获取${country}数据失败:`, error);
      // 失败时返回默认值，避免整个Promise.all失败
      return [country, 0, 0, "请求失败"];
    });
});

// 等待所有请求完成
Promise.all(requestPromises)
  .then(results => {
    newData.push(...results);
    console.log("所有请求完成，最终数据:", newData);
  });

关键总结 #

• 异步操作的回调会在主线程代码执行完后才触发，所有依赖异步结果的代码必须放到回调内。
• 尽量用let/const或者forEach/map这类迭代方法，避免var的作用域陷阱。
• 永远不要忽略异步请求的错误处理（catch方法），否则出问题时难以排查。

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