求助：前端纯JavaScript异步加载文本文件的变量访问问题

这个问题我太熟了——这是异步JavaScript的经典陷阱！你遇到的核心问题是：XMLHttpRequest是异步执行的，代码不会等着请求返回结果，而是会继续往下跑。当你在onreadystatechange回调外面尝试访问myvariable时，请求可能还没完成，变量自然是空的。

为什么会这样？ #

举个直观的例子，看代码执行顺序：

let myvariable;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", filename, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4)
    myvariable = xmlhttp.responseText;
    console.log("回调里的变量值:", myvariable); // 只有请求完成后才会执行
};
console.log("回调外的变量值:", myvariable); // 这行先执行，此时myvariable还是undefined

控制台会先输出回调外的变量值: undefined，过一会儿才会输出回调里的正确值——因为异步请求需要时间，代码不会阻塞等待它完成。

解决方案一：用Promise + async/await（推荐，代码更易读） #

把异步请求封装成Promise，再用async/await让代码看起来像同步逻辑：

// 封装加载文本文件的Promise函数
function loadTextFile(filename) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', filename, true);
    
    xhr.onload = function() {
      if (xhr.readyState === 4) {
        // 必须判断HTTP状态码，确保请求成功
        if (xhr.status === 200) {
          resolve(xhr.responseText); // 请求成功，返回文本内容
        } else {
          reject(new Error(`加载失败，状态码：${xhr.status}`));
        }
      }
    };
    
    xhr.onerror = function() {
      reject(new Error('网络请求出错了'));
    };
    
    xhr.send();
  });
}

// 用async/await调用
async function handleFileLoad() {
  try {
    const myvariable = await loadTextFile('你的文件路径.txt');
    // 这里就可以正常使用myvariable了！
    console.log(myvariable);
    // 所有需要用到该文本的逻辑都可以写在这里，比如渲染页面、处理数据
  } catch (error) {
    console.error('加载文件时出错:', error);
  }
}

// 执行函数
handleFileLoad();

解决方案二：把逻辑放到回调里（传统方式） #

如果不想用ES6+语法，也可以把所有依赖文本的逻辑直接写在回调里，或者封装成函数在回调中调用：

let myvariable;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", filename, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
  // 同时判断readyState和status，确保请求成功
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myvariable = xmlhttp.responseText;
    // 直接处理变量，或者调用封装好的处理函数
    processLoadedText(myvariable);
  }
};

// 封装处理文本的逻辑
function processLoadedText(text) {
  console.log(text);
  // 比如把文本插入到页面元素中
  document.getElementById('content').textContent = text;
  // 其他需要用到文本的操作都写在这里
}

重要提醒 #

别忘了判断HTTP状态码（比如status == 200）！你原来的代码只判断了readyState == 4，这个状态仅表示请求完成，不代表请求成功——如果文件不存在（404）或者服务器出错（500），responseText会是错误页面内容，而非你需要的文本。

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