如何向fetch请求的回调函数传递外部参数？

你遇到的问题本质是var声明的变量为函数级作用域，整个for循环共享同一个m变量。fetch的回调是异步执行的，等回调触发时循环已经运行结束，此时m的值已经累加到10，所有回调拿到的都是最终值，无法匹配对应轮次的m。

方案1：替换var为let（最简洁，优先使用） #

let声明的变量为块级作用域，for循环每一轮迭代都会生成独立的m绑定，异步回调执行时可以直接拿到当前轮次的正确m值，改动成本最低。

// 仅需将循环声明中的var改为let
for(let m = 0; m < 10; m++){          
  fetch("https://www.apiexample.com?key=12345", {    
        method: 'GET'
    })
    .then(response => response.json())
    .then(result => {
        // 把当前轮次的m作为参数传入回调
        callbackFunction(result, m);        
    })
    .catch(error => alert('Ops! '+ error));
}

// 回调函数新增形参接收传入的m
function callbackFunction(result, m){    
    console.log(result);
    console.log('对应轮次的m值：', m); // 此处可拿到正确的轮次对应值
}

方案2：保留var时，通过闭包锁定当前轮次m值 #

如果受场景限制不能使用let，可以通过立即执行函数（IIFE）创建独立作用域，把每一轮的m值锁在当前作用域内，避免被后续循环覆盖。

for(var m = 0; m < 10; m++){
  // 立即执行函数接收当前m值，生成独立的作用域副本
  (function(currentM){
    fetch("https://www.apiexample.com?key=12345", {    
          method: 'GET'
      })
      .then(response => response.json())
      .then(result => {
          callbackFunction(result, currentM);        
      })
      .catch(error => alert('Ops! '+ error));
  })(m) // 将当前轮次的m传入立即执行函数
}

function callbackFunction(result, m){    
    console.log(result);
    console.log('对应轮次的m值：', m);
}

注意：无论使用哪种方案，都不要在callbackFunction内部直接访问外层循环的m变量，一定要把对应轮次的m作为显式参数传入回调，从根源上避免作用域共享导致的值错乱问题。

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