如何确定XMLHttp回调函数的作用域？如何在外部获取results值

你遇到的问题根本不是作用域规则的问题，而是XMLHttpRequest的异步特性导致的。

为什么你拿不到results的值？ #

当你调用xhttp.send()后，JavaScript不会停下来等待请求完成，而是继续执行后续代码。而onreadystatechange里的回调函数，只有在请求成功完成（readyState=4且status=200）的时候才会被触发执行。

也就是说：

• 你在回调外部访问results的时机，早于回调函数执行的时机，此时results还没被赋值，自然拿不到正确的值。
• 哪怕你在全局作用域声明了results，作用域上是可以被回调修改的，但时机不对，结果依然是undefined或者初始值。

解决方案 #

方案1：把依赖results的逻辑放到回调内部

所有需要使用results的代码，都写在回调函数里，确保只有当请求完成、results有值的时候才执行：

var results;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    results = this.responseText;
    document.getElementById("demo").innerHTML = results;
    // 在这里写所有需要用results的逻辑
    console.log(results);
    processResults(results);
  }
};
xhttp.open("GET", "my_file.txt", true);
xhttp.send();

// 封装处理逻辑的函数
function processResults(data) {
  // 你的处理代码
}

方案2：用Promise + async/await简化异步逻辑（更现代的写法）

用Promise封装XMLHttpRequest，再通过async/await让异步代码看起来像同步执行，避免回调嵌套：

// 封装请求为Promise
function fetchFile(url) {
  return new Promise((resolve, reject) => {
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4) {
        if (this.status == 200) {
          resolve(this.responseText);
        } else {
          reject(new Error(`请求失败，状态码：${this.status}`));
        }
      }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
  });
}

// 使用async/await执行请求
async function getAndProcessData() {
  try {
    const results = await fetchFile("my_file.txt");
    document.getElementById("demo").innerHTML = results;
    // 这里可以直接使用results
    console.log(results);
  } catch (error) {
    console.error("出错了：", error);
  }
}

// 调用函数
getAndProcessData();

验证作用域没问题的小测试

如果你想确认作用域确实没问题，可以在请求完成后再访问results，比如通过按钮触发：

var results;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    results = this.responseText;
    document.getElementById("demo").innerHTML = results;
  }
};
xhttp.open("GET", "my_file.txt", true);
xhttp.send();

// 点击按钮时读取results
document.getElementById("checkBtn").addEventListener("click", function() {
  console.log(results); // 请求完成后点击，就能拿到正确值
});

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