主线程同步XMLHttpRequest已弃用报错求助

你碰到的这个弃用提示，问题出在你那段readJSON函数里的同步请求设置——也就是request.open('GET', file, false)里的第三个参数false。同步XMLHttpRequest会阻塞主线程，在请求完成前，用户没法和页面做任何交互（比如点击、滚动），严重拖慢体验，所以现在浏览器都明确弃用这种写法了。

下面给你两种替代方案，都是异步的，不会阻塞主线程：

方案1：改用异步XMLHttpRequest（兼容旧浏览器） #

把同步模式改成异步，通过onload回调来处理返回结果：

function readJSON(file, callback) {
  const request = new XMLHttpRequest();
  // 第三个参数设为true，开启异步模式
  request.open('GET', file, true);
  
  request.onload = function() {
    // 先判断请求是否成功
    if (request.status >= 200 && request.status < 400) {
      try {
        const jsonData = JSON.parse(request.responseText);
        // 成功时把数据传给回调
        callback(null, jsonData);
      } catch (parseErr) {
        // 处理JSON解析错误
        callback(new Error(`JSON解析失败：${parseErr.message}`));
      }
    } else {
      // 处理HTTP状态码错误
      callback(new Error(`请求失败，状态码：${request.status}`));
    }
  };

  // 处理网络层面的错误
  request.onerror = function() {
    callback(new Error('网络请求异常，请检查连接或文件路径'));
  };

  request.send(null);
}

// 调用示例
readJSON('你的JSON文件路径.json', function(error, data) {
  if (error) {
    console.error('读取失败：', error);
    return;
  }
  // 在这里使用解析后的JSON数据
  console.log('获取到的数据：', data);
});

方案2：使用现代的Fetch API（推荐） #

Fetch API是浏览器原生支持的异步请求方案，语法更简洁，还支持Promise和async/await，代码可读性更高：

async function readJSON(file) {
  try {
    const response = await fetch(file);
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    // 直接解析JSON，fetch自带json()方法
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('读取JSON出错：', error);
    throw error; // 可以根据业务需求决定是否抛出错误
  }
}

// 调用示例（两种方式都可以）
// 方式1：用then/catch
readJSON('你的JSON文件路径.json')
  .then(data => {
    console.log('获取到的数据：', data);
    // 处理数据逻辑
  })
  .catch(err => {
    // 处理错误
  });

// 方式2：在async函数里用await
async function processData() {
  try {
    const data = await readJSON('你的JSON文件路径.json');
    console.log('获取到的数据：', data);
    // 处理数据逻辑
  } catch (err) {
    console.error('处理失败：', err);
  }
}
processData();

不管选哪种方案，核心都是用异步请求替代同步请求，这样主线程不会被阻塞，用户体验也能得到保证。

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