XMLHttpRequest读取CSV的Javascript函数返回undefined问题求助

问题根源 #

你的问题出在return语句的作用域上。虽然你用了同步XMLHttpRequest（第三个参数false），但onreadystatechange是一个回调函数——你在回调里写的return rawFile.responseText，只是从这个回调函数本身返回值，并不会把值传递给外层的readTextFile函数。外层函数因为没有明确的返回语句，所以默认返回undefined。

修复同步版本的代码 #

我们可以把响应内容存储到外层作用域的变量里，然后在readTextFile函数的末尾返回这个变量：

function readTextFile(file) {
  let fileContent; // 在外层声明变量存储结果
  const rawFile = new XMLHttpRequest();
  rawFile.open("GET", file, false);
  rawFile.onreadystatechange = function () {
    if(rawFile.readyState === 4) {
      if(rawFile.status === 200 || rawFile.status == 0) {
        fileContent = rawFile.responseText;
        alert(fileContent); // 保留你的alert验证
      }
    }
  }
  rawFile.send(null);
  return fileContent; // 在外层函数返回结果
}

这样修改后，调用readTextFile('../users.csv')就能正确返回文件内容了。

更现代的异步方案（推荐） #

同步XMLHttpRequest在现代浏览器中会有性能问题，甚至在一些场景下被浏览器限制（比如主线程上的同步请求可能阻塞页面渲染）。更推荐使用fetch API结合async/await来实现异步读取：

async function readTextFile(file) {
  try {
    const response = await fetch(file);
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败：HTTP状态码 ${response.status}`);
    }
    const fileContent = await response.text();
    alert(fileContent);
    return fileContent;
  } catch (error) {
    console.error('读取文件出错：', error);
    return null; // 出错时返回null或其他默认值
  }
}

调用这个异步函数时，需要用then或者await来获取结果：

<script src='readCsvFile.js'></script>
<script>
  // 方式1：使用then
  readTextFile('../users.csv').then(content => {
    alert(content);
  });

  // 方式2：使用async IIFE（立即执行异步函数）
  (async () => {
    const content = await readTextFile('../users.csv');
    alert(content);
  })();
</script>

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