将AJAX响应文本赋值给变量时遇undefined问题求助

嘿，这个问题我太熟了——本质上是异步操作的执行顺序在搞鬼！你遇到的情况是：当你调用readFile()后，JavaScript不会等着AJAX请求完成，而是直接往下执行console.log(x)，这时候请求还在加载大文件呢，自然拿不到数据，返回undefined。

咱们先把你没写完的代码补全，再一步步解决问题：

问题代码的核心问题 #

你的原始代码大概是这样的（补全未写完的部分）：

function readFile(file) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', file, true); // 这里async设为true是对的，同步请求现代浏览器会限制
  var x;
  xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200) {
      x = xhr.responseText; // 这里请求完成后才会给x赋值
    }
  };
  xhr.send();
  return x; // 这里会先执行，此时x还没被赋值，所以返回undefined
}

// 调用时直接log，自然拿到undefined
var result = readFile('countries.csv');
console.log(result);

解决方案1：使用回调函数 #

把处理数据的逻辑放到回调里，等请求完成后再执行：

function readFile(file, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', file, true);
  xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText); // 请求完成后调用回调，把数据传进去
    }
  };
  xhr.send();
}

// 调用时传入处理逻辑
readFile('countries.csv', function(data) {
  console.log(data); // 这里就能拿到完整的文件内容了
  // 后续对数据的处理都放在这里面
});

解决方案2：用Promise封装（更现代的写法） #

用Promise把AJAX请求包装起来，支持then链式调用或者async/await，代码更清晰：

function readFile(file) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', file, true);
    xhr.onload = function() {
      if(xhr.status === 200) {
        resolve(xhr.responseText); // 请求成功，返回数据
      } else {
        reject(new Error('请求失败，状态码：' + xhr.status));
      }
    };
    xhr.onerror = function() {
      reject(new Error('网络请求出错'));
    };
    xhr.send();
  });
}

// 方法一：用then调用
readFile('countries.csv')
  .then(function(data) {
    console.log(data);
    // 处理数据
  })
  .catch(function(err) {
    console.error(err);
  });

// 方法二：用async/await（需要在async函数里使用）
async function loadData() {
  try {
    var data = await readFile('countries.csv');
    console.log(data);
    // 处理数据
  } catch(err) {
    console.error(err);
  }
}
loadData();

小提示 #

• 对于大文件，你也可以考虑用xhr.onprogress来监听加载进度，给用户显示加载状态，体验更好。
• 如果你用的是现代浏览器，也可以直接用fetch API，它本身就是基于Promise的，写法更简洁：

async function readFile(file) {
  const response = await fetch(file);
  if(!response.ok) {
    throw new Error('请求失败');
  }
  return await response.text();
}

// 调用方式和上面的async/await一样

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