异步函数传递变量两次调用时异常变更及HTTP请求代码咨询

嘿，这个坑我之前踩过！你遇到的变量异常变更问题，核心原因是**xmlhttp没有被声明为函数的局部变量**——它变成了全局变量（因为缺少var/let/const关键字）。当你连续两次调用httpGet时，第二次调用会直接覆盖第一次创建的xmlhttp实例，毕竟异步请求是不会阻塞后续代码执行的。等第一次请求的回调触发时，它拿到的已经是第二次的xmlhttp对象了，自然会出现变量混乱的情况。

下面给你两种可行的解决方法：

方法一：将xmlhttp声明为局部变量 #

只需要给xmlhttp加上let声明，把它限定在httpGet函数的作用域内，这样每次调用函数都会创建一个独立的实例，不会互相干扰：

function httpGet(URL, type, daily, weekly, monthly) { 
  // 加上let，让xmlhttp成为当前函数的局部变量
  let xmlhttp;
  if (window.XMLHttpRequest) { 
    xmlhttp = new XMLHttpRequest(); 
  } else { 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
  xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
      if (type === 'table') { 
        createTable(xmlhttp.responseText, daily, weekly, monthly); 
      }
      // 可以在这里加上错误处理，比如状态码不是200的情况
    }
  } 
  xmlhttp.open("GET", URL, true); 
  xmlhttp.send(); 
}

这样修改后，两次调用的xmlhttp完全隔离，各自的回调函数会捕获自己作用域内的实例，就不会出现变量被覆盖的问题了。

方法二：使用现代的fetch API替代XMLHttpRequest #

如果你的项目不需要兼容IE这类老旧浏览器，更推荐用fetch配合async/await来写，代码更简洁直观，也从根源上避免了回调作用域的变量问题：

async function httpGet(URL, type, daily, weekly, monthly) {
  try {
    const response = await fetch(URL);
    // 先判断请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    const responseText = await response.text();
    if (type === 'table') {
      createTable(responseText, daily, weekly, monthly);
    }
  } catch (error) {
    console.error('HTTP请求出错：', error);
    // 这里可以添加错误提示逻辑
  }
}

async/await让异步代码看起来像同步代码，可读性更高，同时也自带了作用域隔离的特性，不会出现变量被覆盖的问题。

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