循环调用$http get无作用域？多API合并调用问题求助

嘿，这个坑我之前踩过！咱们先搞清楚问题出在哪，再一步步解决～

为什么会出现“属性始终显示最后一个交易所”的问题？ #

这是JavaScript闭包的经典陷阱：当你用var声明循环变量时，整个循环里的变量共享同一个作用域。$http.get是异步请求，当它的回调函数执行时，循环早就跑完了，变量已经指向最后一个交易所，所以所有回调都会把价格赋值给最后那个对象。

解决方案 #

这里有几种简单有效的办法：

1. 用ES6的let声明变量（最推荐） #

let有块级作用域，每次循环都会创建一个新的变量绑定，回调函数会捕获当前循环的那个变量：

// 假设你已经拿到了所有交易所信息存在exchanges数组里
for (let i = 0; i < exchanges.length; i++) {
  let exchange = exchanges[i];
  $http.get(`/api/price/btc/${exchange.id}`)
    .then(response => {
      exchange.btcPrice = response.data.price;
    });
}

2. 使用立即执行函数（IIFE）创建独立作用域 #

如果你的项目还不能用ES6，用IIFE把每次循环的交易所变量包裹起来，强制生成独立作用域：

for (var i = 0; i < exchanges.length; i++) {
  var exchange = exchanges[i];
  // 把当前exchange作为参数传入IIFE，创建独立作用域
  (function(currentExchange) {
    $http.get('/api/price/btc/' + currentExchange.id)
      .then(function(response) {
        currentExchange.btcPrice = response.data.price;
      });
  })(exchange);
}

3. 改用forEach循环 #

forEach的回调函数每次迭代都有自己的作用域，天然避免闭包陷阱：

exchanges.forEach(exchange => {
  $http.get(`/api/price/btc/${exchange.id}`)
    .then(response => {
      exchange.btcPrice = response.data.price;
    });
});

循环中调用$http get是否妥当？ #

本身是没问题的，但要注意几个细节：

• 并发请求限制：如果交易所数量很多（比如几十个上百个），一次性发起大量请求会触发浏览器的并发请求限制（一般是6-8个），剩下的请求会排队，影响性能。这种情况可以考虑分批请求，或者用$q.all批量处理（但也要注意数量）。
• 错误处理：一定要给每个请求加上.catch，避免某个请求失败导致整个流程异常，同时给用户友好的提示：

  exchanges.forEach(exchange => {
    $http.get(`/api/price/btc/${exchange.id}`)
      .then(response => {
        exchange.btcPrice = response.data.price;
      })
      .catch(error => {
        console.error(`获取${exchange.name}的BTC价格失败:`, error);
        exchange.btcPrice = '获取失败'; // 设置默认值或提示
      });
  });
  

• 性能优化：如果请求频率高，可以考虑给请求加缓存，避免重复请求相同接口。

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