如何将XMLHttpRequest的输出作为变量返回？返回值无法传递到外部

核心问题分析 #

你的代码存在两个关键错误：

1. MyFunction 本身没有任何 return 语句，所以调用后默认返回 undefined。
2. onloadend 回调里的 return 是回调函数自身的返回值，和 MyFunction 的返回值无关——因为异步请求是在 MyFunction 执行完毕后才完成的，此时函数早已退出，根本无法捕获回调里的返回值。

另外还有两个细节问题：

• alert 只接受一个参数，你之前的写法会忽略第二个参数，需要用字符串拼接或模板字符串。
• URL 参数没有做编码处理，若 ValueToBeProcessed 包含特殊字符（如空格、&等），会导致请求错误。

解决方案1：用 Promise + async/await 封装（推荐，现代异步写法） #

将请求逻辑封装成 Promise，通过 async/await 或 .then() 处理异步结果，既不阻塞主线程，又能优雅获取返回值。

改写后的函数：

function MyFunction(ValueToBeProcessed) {
  return new Promise((resolve, reject) => {
    const ReqQ = new XMLHttpRequest();
    
    ReqQ.onloadend = function() {
      if (this.readyState === 4) {
        if (this.status === 200) {
          // 请求成功，返回结果
          resolve(this.responseText);
        } else {
          // 请求失败，抛出错误
          reject(new Error(`请求失败，状态码：${this.status}`));
        }
      }
    };

    // 捕获网络错误
    ReqQ.onerror = function() {
      reject(new Error("网络请求出错"));
    };

    // 对参数编码，避免特殊字符问题
    const encodedParam = encodeURIComponent(ValueToBeProcessed);
    ReqQ.open("GET", `myphpfunction.php?pV=${encodedParam}`, true);
    ReqQ.send();
  });
}

调用方式（async/await）：

const testAVal = "SomeStringToBeProcessed";

// 必须在async函数中使用await
async function processResult() {
  try {
    const outputStr = await MyFunction(testAVal);
    console.log("outputStr: ", outputStr);
    alert(`outputStr: ${outputStr}`);
  } catch (error) {
    console.error("处理出错：", error);
  }
}

processResult();

调用方式（.then() 兼容旧环境）：

const testAVal = "SomeStringToBeProcessed";

MyFunction(testAVal)
  .then(outputStr => {
    console.log("outputStr: ", outputStr);
    alert(`outputStr: ${outputStr}`);
  })
  .catch(error => {
    console.error("处理出错：", error);
  });

解决方案2：使用回调函数（传统异步写法） #

给 MyFunction 添加回调参数，请求完成后通过回调传递结果或错误。

改写后的函数：

function MyFunction(ValueToBeProcessed, callback) {
  const ReqQ = new XMLHttpRequest();
  
  ReqQ.onloadend = function() {
    if (this.readyState === 4) {
      if (this.status === 200) {
        // 成功时，第一个参数传null（无错误），第二个传结果
        callback(null, this.responseText);
      } else {
        // 失败时，第一个参数传错误对象
        callback(new Error(`请求失败，状态码：${this.status}`));
      }
    }
  };

  ReqQ.onerror = function() {
    callback(new Error("网络请求出错"));
  };

  const encodedParam = encodeURIComponent(ValueToBeProcessed);
  ReqQ.open("GET", `myphpfunction.php?pV=${encodedParam}`, true);
  ReqQ.send();
}

调用方式：

const testAVal = "SomeStringToBeProcessed";

MyFunction(testAVal, function(error, outputStr) {
  if (error) {
    console.error("处理出错：", error);
    return;
  }
  console.log("outputStr: ", outputStr);
  alert(`outputStr: ${outputStr}`);
});

为什么不推荐同步请求（open第三个参数设为false）？ #

同步请求会阻塞主线程，导致页面在请求完成前完全失去响应，用户体验极差，现代浏览器甚至会对同步XMLHttpRequest做限制，所以绝对不建议使用这种方式。

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