XHR请求对应if分支未执行且无数据返回，求排查原因

你的代码里if (xhr.readyState === 4 && xhr.status === 200)分支没执行，核心原因无非是请求没完成（readyState没到4）或者请求完成但状态码不是200，具体可以从这几个方向排查：

1. 请求根本没完成（readyState未达到4） #

最常见的是跨域拦截问题：浏览器会限制不同域名的请求，如果你是在本地file://协议下运行代码，或者网页域名与mediastack API域名不同且API未配置跨域许可，请求会被直接拦截，根本无法走到完成状态。

• 排查方式：打开浏览器控制台的「网络」面板，查看是否存在这条请求记录。如果没有，就是跨域被拦截了。
• 解决建议：
  • 改用HTTPS请求：mediastack API支持HTTPS，把URL里的http://替换为https://（目前多数API已不再支持HTTP请求，这很可能是核心问题）。
  • 本地开发用服务器：比如用Node.js的http-server、Python的SimpleHTTPServer启动本地服务，在http://localhost:端口下访问页面，避免file://协议的跨域限制。

2. 请求完成了，但状态码不是200 #

这种情况readyState会到4，但status不符合200的要求，分支自然不会执行。常见诱因：

• API Key无效：你填写的My_API_Key_Here是否为有效密钥？去mediastack后台确认Key的状态，是否过期、配额耗尽或未正确激活。
• URL构造错误：检查参数拼接是否正确，比如encodeURIComponent(query)是否处理了特殊字符？也可以直接在浏览器地址栏访问构造好的URL，查看返回的内容和状态码，确认API是否正常响应。
• 请求被API拒绝：比如IP被限制、请求频率超限，或者参数不符合要求（比如limit值超过API允许的最大值）。

3. 调试技巧：打印全状态定位问题 #

修改你的onreadystatechange回调，把所有readyState和status都输出，快速定位问题节点：

xhr.onreadystatechange = function () {
  console.log("当前readyState:", xhr.readyState, "当前status:", xhr.status);
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("fetchNewsData() xhr.readyState started");
    var data = JSON.parse(xhr.responseText);
    displayNewsData(data.data);
  } else if (xhr.readyState === 4) {
    // 请求完成但状态异常，打印响应内容查看错误信息
    console.log("请求完成但状态异常，响应内容:", xhr.responseText);
  }
};

额外优化：改用更直观的事件监听 #

onreadystatechange会在readyState变化时多次触发，改用onload、onerror等事件可以简化逻辑，更清晰地处理成功和错误场景：

xhr.onload = function() {
  console.log("fetchNewsData() xhr.readyState started");
  var data = JSON.parse(xhr.responseText);
  displayNewsData(data.data);
};
// 监听请求错误
xhr.onerror = function() {
  console.log("请求发生错误");
};
// 监听请求结束（无论成功失败）
xhr.onloadend = function() {
  console.log("请求结束，状态码:", xhr.status);
};

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