调用SoundCloud API时遇主线程同步XMLHttpRequest弃用错误求助

这个报错是浏览器在明确提醒你：主线程上的同步XMLHttpRequest已经被弃用。原因很直接——同步请求会完全卡住主线程，在请求完成前，用户的任何操作（点击、滚动、输入）都会毫无响应，严重破坏页面体验，所以现在浏览器已经禁止在主线程中使用同步XHR。

核心修复方案：把同步请求改成异步 #

XHR默认就是异步模式，大概率是你在调用open方法时，显式把第三个参数设为了false（开启同步模式）。改成异步后，我们需要通过onload事件回调来处理响应结果，而不是同步等待请求完成。

你可能写过的错误同步代码：

const xhr = new XMLHttpRequest();
// 第三个参数设为false，强制同步模式
xhr.open('GET', 'https://api-v2.soundcloud.com/charts?kind=trending&genre=soundcloud:genres:all-music&client_id=1dff55bf515582dc759594dac5ba46e9&q=', false);
xhr.send();
// 同步等待请求结束后再处理
if (xhr.status === 200) {
  // 准备开始解析响应
}

修改后的异步代码：

const xhr = new XMLHttpRequest();
// 省略第三个参数（默认值为true，异步模式），也可以显式写true
xhr.open('GET', 'https://api-v2.soundcloud.com/charts?kind=trending&genre=soundcloud:genres:all-music&client_id=1dff55bf515582dc759594dac5ba46e9&q=');

// 请求成功完成时触发的回调
xhr.onload = function() {
  if (this.status === 200) {
    // 在这里开始你的解析逻辑，比如把响应转为JSON格式
    try {
      const trendingTracks = JSON.parse(this.responseText);
      console.log('获取到热门曲目数据:', trendingTracks);
      // 所有依赖请求结果的操作（比如渲染页面）都要放在这里
    } catch (err) {
      console.error('解析响应失败:', err);
    }
  } else {
    console.error('请求失败，状态码:', this.status);
  }
};

// 处理请求过程中的网络错误
xhr.onerror = function() {
  console.error('请求发生网络错误');
};

// 发送异步请求
xhr.send();

为什么异步是最优解？ #

异步请求不会阻塞主线程，用户在请求加载过程中仍然可以正常操作页面。所有需要用到请求结果的逻辑，必须放在onload回调里——因为异步请求的结果不是立刻就能拿到的，只有等请求完成后才会执行这些逻辑。

极端场景下的替代方案（不推荐） #

除非有非常特殊的需求，否则强烈不建议使用同步XHR。如果一定要用，你可以把同步请求放到Web Worker中执行，因为Web Worker运行在独立线程，不会阻塞主线程，但这会增加代码复杂度，所以优先考虑异步方案。

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