Angular向HTTP GET请求传参时的异步循环变量问题求助

嘿，这是异步代码里非常典型的闭包陷阱，我来帮你搞定这个问题～

问题原因 #

你说得没错，HTTP请求是异步执行的，for循环会在第一个请求的回调触发前就跑完所有迭代。因为你用了var声明i，这个变量是函数级作用域（或者全局作用域），所有的subscribe回调共享同一个i的引用。当回调最终执行时，i已经变成了循环结束时的那个值，所以日志里只会显示最后一个元素。

几种解决方案 #

1. 用let代替var（最简单的现代写法）

let是ES6引入的块级作用域变量，在for循环里使用let时，每次迭代都会创建一个新的i变量，每个subscribe回调引用的都是当前迭代的独立i：

for (let i = 0, len = this.recentArtists.topartists.artist.length; i < len && i < historyLimit; i++) {
  this.http.get(`${this.apiUrl}?method=artist.getsimilar&mbid=${this.recentArtists.topartists.artist[i].mbid}`)
    .map(res => res.json())
    .subscribe(similarResult => {
      console.log(this.recentArtists.topartists.artist[i]); // 现在能拿到当前循环对应的artist了
    });
}

2. 使用forEach循环（更直观）

直接遍历数组元素，forEach的回调会为每个元素创建独立的作用域，你可以直接拿到当前迭代的artist和索引，完全避开索引引用的问题：

// 用slice(0, historyLimit)来匹配原循环的i < historyLimit条件
this.recentArtists.topartists.artist.slice(0, historyLimit).forEach((artist, index) => {
  this.http.get(`${this.apiUrl}?method=artist.getsimilar&mbid=${artist.mbid}`)
    .map(res => res.json())
    .subscribe(similarResult => {
      console.log(artist); // 直接访问当前迭代的artist，不用索引也能拿到
      console.log(index); // 对应的索引也能正常获取
    });
});

3. 立即执行函数表达式（IIFE，老派但易懂的闭包解决方案）

如果你需要兼容旧环境，或者想理解闭包的原理，可以用IIFE为每个迭代创建独立作用域，把当前的i作为参数传入：

for (var i = 0, len = this.recentArtists.topartists.artist.length; i < len && i < historyLimit; i++) {
  // 用call(this)保证内部的this指向当前组件
  (function(currentIndex) {
    this.http.get(`${this.apiUrl}?method=artist.getsimilar&mbid=${this.recentArtists.topartists.artist[currentIndex].mbid}`)
      .map(res => res.json())
      .subscribe(similarResult => {
        console.log(this.recentArtists.topartists.artist[currentIndex]);
      });
  }).call(this, i);
}

总结 #

推荐优先用forEach或者let的写法，代码更简洁易读，也符合现代TypeScript/JavaScript的最佳实践。这样每个异步回调就能正确访问到请求发起时对应的变量啦～

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