如何在axios回调中获取请求发起时的循环变量i？

当然可行，以下是几种实用的解决方法：

1. 用let替代var声明循环变量 #

var是函数级作用域，循环结束后i的值已经变为10，所有回调共享同一个i的引用。而let是块级作用域，每次循环都会创建一个独立的i变量，回调会捕获当前循环对应的i值：

for (let i = 0; i < 10; i++){   
  axios.get(url).then(res=>{
    console.log("product connection success",i);
  }).catch(res=>{
    console.log("product connection error",res);
  });
}

2. 利用闭包保存当前i的值 #

通过立即执行函数表达式（IIFE）为每次循环创建独立作用域，将当前i作为参数传入，让回调绑定这个独立变量：

for (var i = 0; i < 10;i++){   
  (function(currentI) {
    axios.get(url).then(res=>{
      console.log("product connection success", currentI);
    }).catch(res=>{
      console.log("product connection error",res);
    });
  })(i);
}

3. 使用forEach遍历数组 #

将循环转换为数组遍历，forEach的回调函数会为每个元素创建独立作用域，自然保留当前索引值：

Array.from({length:10}).forEach((_, i) => {
  axios.get(url).then(res=>{
    console.log("product connection success",i);
  }).catch(res=>{
    console.log("product connection error",res);
  });
});

4. 用async/await实现串行请求（可选） #

如果不需要并行发起请求，可通过async/await让请求按顺序执行，此时i的值同步更新，能直接拿到当前循环的i：

async function fetchData() {
  for (var i = 0; i < 10;i++){   
    try {
      const res = await axios.get(url);
      console.log("product connection success",i);
    } catch (err) {
      console.log("product connection error", err);
    }
  }
}
fetchData();

你可以根据实际场景选择合适的方法，都能实现获取发起请求时i值的需求。

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