JavaScript Promise链式调用时外部变量访问问题

老兄，这个坑我当年刚玩Promise链式调用的时候踩得结结实实！核心问题就是闭包和异步执行时机不匹配——循环是同步跑完的，但Promise的then回调是异步触发的，等回调执行的时候，循环里的变量早已经变成最后一次迭代的值了。给你几个实用的解决办法，按推荐程度排序：

1. 用let声明循环变量（ES6+最优解） #

ES6引入的let在for循环里会为每一次迭代创建独立的变量绑定，而不是像var那样共用同一个变量。直接把循环变量改成let就能解决问题：

let promiseChain = Promise.resolve();
// 用let声明i，每次迭代都有专属的i
for (let i = 0; i < 5; i++) {
  promiseChain = promiseChain.then(() => {
    console.log(i); // 现在会依次输出0、1、2、3、4，而非全5
    return someAsyncOperation(i);
  });
}

这是最简单最优雅的方案，只要你的项目支持ES6+，直接用这个就行。

2. 用立即执行函数（IIFE）创建闭包（ES5兼容方案） #

如果还需要兼容ES5环境，可以用IIFE（立即执行函数表达式）把每次迭代的变量“锁”在独立作用域里：

var promiseChain = Promise.resolve();
for (var i = 0; i < 5; i++) {
  // 把当前迭代的i作为参数传入IIFE，捕获当前值
  (function(currentI) {
    promiseChain = promiseChain.then(() => {
      console.log(currentI); // 正确输出当前迭代的数值
      return someAsyncOperation(currentI);
    });
  })(i);
}

每次循环时，IIFE会接收当前的i值并保存为currentI，后续异步回调读取的都是这个绑定好的专属值，不会被循环后续的修改影响。

3. 用forEach替代普通for循环 #

Array.prototype.forEach的回调函数会为每个数组元素创建独立的作用域，天然避免变量共享问题：

let promiseChain = Promise.resolve();
// 遍历数组，每个元素对应一次迭代
[0, 1, 2, 3, 4].forEach(i => {
  promiseChain = promiseChain.then(() => {
    console.log(i); // 正确输出每个迭代值
    return someAsyncOperation(i);
  });
});

这种方式适合已经有数据源数组的场景，代码也比较简洁。

4. 用async/await重构（可读性拉满） #

如果你的环境支持async/await（现在绝大多数项目都支持），可以把链式调用改成同步风格的顺序执行，彻底绕开这个问题：

async function processTasks() {
  for (let i = 0; i < 5; i++) {
    console.log(i); // 依次输出0到4
    // await会等待异步操作完成后再进入下一次循环
    await someAsyncOperation(i);
  }
}
processTasks();

这种写法逻辑更直观，完全不用考虑闭包和异步时机的问题，可读性和维护性都大大提升，是现在的主流方案。

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