JS新手求助：XMLHttpRequest函数无法返回值如何解决？

看起来你遇到的是异步操作导致的返回值问题——这是很多JS新手都会踩的坑，别担心，咱们一步步理清楚：

为什么会返回undefined？ #

你在浏览器控制台能成功，是因为控制台会自动等待异步请求完成并输出结果，但把代码放进函数后，函数不会等异步请求（比如fetch或者XMLHttpRequest）完成就先执行完了，所以直接返回了undefined。举个例子，你的代码大概是这样的：

function getStatus() {
  // 发送GET请求是异步的，函数不会等它完成
  fetch('http://目标服务器IP')
    .then(res => res.json())
    .then(data => {
      const statuses = 你的筛选逻辑处理data;
      // 这里的return是回调函数的返回，不是getStatus的返回！
      return statuses;
    });
  // 函数到这里就执行完了，没有返回任何值，所以默认返回undefined
}

const result = getStatus();
console.log(result); // 第6行打印undefined

怎么让函数返回statuses？ #

因为异步操作的结果不能同步返回，我们需要用Promise或者async/await来处理异步流程：

方案1：使用async/await（推荐，代码更简洁）

把getStatus改成异步函数，用await等待请求完成，然后直接返回处理后的结果：

async function getStatus() {
  try {
    // 等待请求响应
    const response = await fetch('http://目标服务器IP');
    // 等待解析JSON
    const data = await response.json();
    // 执行你的筛选逻辑
    const statuses = 你的筛选代码处理data;
    // 这里的return会把statuses包装成Promise返回
    return statuses;
  } catch (error) {
    console.error('请求或解析出错:', error);
    throw error; // 可以抛出错误让调用方处理
  }
}

// 调用的时候需要用await（在async函数里）或者.then()
// 方式一：在async函数里调用
async function renderTable() {
  const statuses = await getStatus();
  console.log(statuses); // 现在能拿到正确的结果了
  // 在这里把statuses添加到HTML表格中
}
renderTable();

// 方式二：用.then()调用
getStatus().then(statuses => {
  console.log(statuses);
  // 渲染表格的逻辑
}).catch(error => {
  console.error('处理失败:', error);
});

方案2：直接返回Promise

如果你还不熟悉async/await，也可以手动返回Promise对象：

function getStatus() {
  return new Promise((resolve, reject) => {
    fetch('http://目标服务器IP')
      .then(res => res.json())
      .then(data => {
        const statuses = 你的筛选代码处理data;
        resolve(statuses); // 把结果传递给调用方
      })
      .catch(error => {
        reject(error); // 传递错误
      });
  });
}

// 调用方式和上面一样
getStatus().then(statuses => {
  console.log(statuses);
  // 渲染表格
}).catch(err => console.error('出错:', err));

关键提醒 #

异步操作的结果不能直接同步获取，必须等待异步任务完成后才能拿到。所以你原来的直接赋值const result = getStatus()是行不通的，必须通过.then()或者await来接收结果，然后在回调里处理表格渲染的逻辑。

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