如何实现无页面冻结的同步XMLHttpRequest且无需重写所有方法调用？

问题根源 #

你遇到的网页冻结问题，本质是因为同步XMLHttpRequest会完全阻塞浏览器的主线程——在请求完成前，浏览器无法处理任何用户点击、页面渲染或其他JavaScript代码，所以网页会呈现“卡住”的状态。这是同步请求的固有特性，只要在主线程使用同步请求，就无法避免这个问题。

无需大规模重写调用的解决方案 #

虽然不能完全保留同步调用的写法（否则依然会阻塞），但我们可以用最小的改动迁移到异步请求，同时让现有调用代码的改动量降到最低：

1. 将原函数改为Promise异步版本

首先，把你的同步请求函数重写成返回Promise的异步版本，这一步只需要改函数内部，不需要修改调用方的代码结构：

function combinedServerRequest(requestParams) {
  return new Promise((resolve, reject) => {
    const xmlHttp = new XMLHttpRequest();
    // 关键：第三个参数改为true，启用异步请求
    xmlHttp.open('POST', 'utility/php/RequestFile.php', true);
    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    
    // 请求成功的处理逻辑
    xmlHttp.onload = function() {
      if (xmlHttp.status === 200) {
        resolve(xmlHttp.responseText);
      } else {
        reject(new Error(xmlHttp.statusText));
      }
    };
    
    // 处理网络错误（比如断网、服务器不可达）
    xmlHttp.onerror = function() {
      reject(new Error('Network request failed'));
    };
    
    xmlHttp.send(requestParams);
  });
}

2. 修改调用代码为async/await风格（最小改动）

对于原来调用combinedServerRequestSync的地方，只需要做两处小修改：

• 在包含调用的函数前添加async关键字
• 在调用函数前添加await，并用try/catch处理错误（替代原来的else分支）

举个例子：

// 原来的同步调用代码：
// function handleUserAction() {
//   const params = 'foo=bar';
//   const result = combinedServerRequestSync(params);
//   if (typeof result === 'string' && !result.startsWith('Error')) {
//     // 处理成功结果
//     console.log('Success:', result);
//   } else {
//     // 处理错误
//     console.error('Failed:', result);
//   }
// }

// 修改后的异步调用代码：
async function handleUserAction() {
  const params = 'foo=bar';
  try {
    const result = await combinedServerRequest(params);
    // 原来处理成功结果的代码完全保留
    console.log('Success:', result);
  } catch (error) {
    // 原来处理错误的代码移到这里
    console.error('Failed:', error.message);
  }
}

这种方式的好处是：

• 原有业务逻辑的代码几乎不需要变动，只是调整了结果获取的方式
• 彻底解决了网页冻结的问题，因为异步请求不会阻塞主线程
• 符合现代浏览器的最佳实践，避免了同步XMLHttpRequest的潜在限制

为什么不能完全保留同步调用？ #

简单来说：主线程中的同步请求必然阻塞，没有任何技术手段能让同步请求不冻结网页。如果强行保留同步调用，只能继续忍受冻结问题，这在现代网页中是不可接受的——用户体验会非常差，甚至可能被浏览器标记为“无响应”。

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