如何返回XMLHttpRequest的响应结果？JavaScript新手求助

嘿，我完全懂你作为JS新手遇到异步问题的困惑！XMLHttpRequest的异步特性确实容易让人摸不着头脑，别急，我一步步给你讲清楚怎么拿到它的响应内容～

为什么直接return拿不到结果？ #

首先得明白：XMLHttpRequest默认是异步的——当你调用xhr.send()后，代码会继续往下执行，不会等请求完成。如果你直接在函数里return结果，那时候请求还没结束，拿到的只会是undefined或者初始值。比如你可能一开始会这么写，但肯定行不通：

function fetchData() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data', true);
  let result;
  xhr.onload = function() {
    result = xhr.responseText;
  };
  xhr.send();
  return result; // 这里return时，onload还没执行，result是undefined！
}

那该怎么办？下面给你两种实用的方案，从易到难，新手也能快速上手。

方案1：用回调函数处理结果 #

这是最基础的异步处理方式——你把“拿到结果后要做的事”写成一个函数，传给请求函数，等请求完成后自动调用这个函数。

示例代码：

// 定义一个带回调的请求函数
function fetchData(callback) {
  const xhr = new XMLHttpRequest();
  // 第三个参数true表示异步请求
  xhr.open('GET', 'https://api.example.com/data', true);

  // 请求成功完成时触发
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 请求成功，把响应内容传给回调函数
      callback(null, xhr.responseText);
    } else {
      // 请求失败，把错误信息传给回调
      callback(new Error(`请求失败：${xhr.status}`), null);
    }
  };

  // 网络出错时触发
  xhr.onerror = function() {
    callback(new Error('网络请求出错啦'), null);
  };

  xhr.send();
}

// 调用这个函数，用回调处理结果
fetchData(function(error, data) {
  if (error) {
    console.error('哎呀出错了：', error);
  } else {
    console.log('终于拿到数据啦：', data);
    // 这里就可以用data做你想做的任何事啦
  }
});

方案2：用Promise+async/await（更推荐，代码更清晰） #

现在JS里更主流的是用Promise来封装异步操作，再配合async/await，代码看起来就像同步的一样，新手更容易理解。

第一步：把XMLHttpRequest封装成Promise #

function fetchData() {
  // 返回一个Promise对象
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/data', true);

    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        // 请求成功，用resolve返回结果
        resolve(xhr.responseText);
      } else {
        // 请求失败，用reject抛出错误
        reject(new Error(`请求失败：${xhr.status}`));
      }
    };

    xhr.onerror = function() {
      reject(new Error('网络请求出错啦'));
    };

    xhr.send();
  });
}

第二步：调用Promise #

有两种调用方式，选你觉得顺手的就行：

方式A：用then/catch链式调用

fetchData()
  .then(data => {
    console.log('拿到的数据：', data);
    // 处理数据
  })
  .catch(error => {
    console.error('出错了：', error);
  });

方式B：用async/await（像同步代码一样）

// 注意：await必须放在async函数里
async function getData() {
  try {
    // 等待Promise完成，拿到结果
    const data = await fetchData();
    console.log('拿到的数据：', data);
    // 处理数据
  } catch (error) {
    // 捕获错误
    console.error('出错了：', error);
  }
}

// 调用这个async函数
getData();

总结 #

• 别想着直接return异步请求的结果，因为请求还没完成函数就先结束了
• 新手可以先从回调函数入手，理解异步的逻辑
• 学会用Promise+async/await，这是现在JS异步编程的主流写法，代码更易读、易维护

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