为何$q.when() Promise链式调用在while循环中无法正常工作？

我需要按固定步长递增offset，链式调用API直到offset超过最大计数。首次尝试用while循环实现，但传入getData的offset值始终错误；改用forEach遍历预先生成的offset列表则运行正常。想知道：while循环方式是否与AngularJS的Promise处理机制不兼容？这仅与while循环特性有关，还是和$q.when()也有关？

错误的while循环实现 #

var processAll = function() { // initial offset value zero
  var offset = 0;
  var promiseChain = $q.when();
  while(offset < maxCount) {
    promiseChain = promiseChain.then(function () {
      return getData(offset).then(function (result) {
        // processing result data
      });
    });
    offset += 200;
  }
  return promiseChain;
};

正常运行的forEach实现 #

var processAll = function() {
  var promiseChain = $q.when();
  var offsetList = divideIntoList(); // gets a list like [0, 200, 400] etc based on maxCount
  offsetList.forEach(function (offset) {
    promiseChain = promiseChain.then(function () {
      return getData(offset).then(function (result) {
        // processing result data
      });
    });
  });
  return promiseChain;
};

原因分析 #

这完全和AngularJS的$q机制、Promise处理无关，核心是JavaScript闭包的变量捕获特性导致的差异：

• while循环的问题：循环是同步执行的，所有then回调捕获的是同一个offset变量的引用。当循环结束时，offset已经被累加至超过maxCount的最终值（比如maxCount=500时，offset最后是600）。等Promise回调异步执行时，所有getData调用都会使用这个最终值，导致传参错误。
• forEach的优势：forEach的回调函数在每次迭代时都会创建独立的作用域，每个回调里的offset是当前迭代的变量副本，捕获的是该次循环的具体值，因此异步执行时能传入正确的offset。

结论 #

1. while循环和AngularJS Promise机制不存在兼容性问题
2. 问题和$q.when()无关，本质是闭包对变量的捕获方式差异
3. 仅和while循环的变量作用域特性有关

while循环的修复方案 #

可以通过创建独立作用域捕获当前offset值来修复，比如用立即执行函数：

var processAll = function() {
  var offset = 0;
  var promiseChain = $q.when();
  while(offset < maxCount) {
    // 用立即执行函数包裹，捕获当前offset的快照
    (function(currentOffset) {
      promiseChain = promiseChain.then(function () {
        return getData(currentOffset).then(function (result) {
          // processing result data
        });
      });
    })(offset);
    offset += 200;
  }
  return promiseChain;
};

如果环境支持ES6+，也可以用let声明offset（let在循环中会为每次迭代创建新的变量实例）：

var processAll = function() {
  var promiseChain = $q.when();
  // let声明的offset，每次循环都是独立变量
  for(let offset = 0; offset < maxCount; offset += 200) {
    promiseChain = promiseChain.then(function () {
      return getData(offset).then(function (result) {
        // processing result data
      });
    });
  }
  return promiseChain;
};

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