javascript - 当内容明显正确时，如何修复 XMLHttpRequest.open() 返回代码 0？

Question

我正在尝试使用开发人员自动生成的链接来调用 API。我正在使用基于 https://javascript.info/xmlhttprequest 的教程的 XMLHttpRequest.open() 方法。 。然而，当我尝试调用电话时，我能够达到的唯一状态是“0”，我认为这意味着我的目的(？)。

我尝试了指向其他 API 的不同链接，包括那些除了普通链接之外不需要任何内容​​的链接，并且得到了相同的响应，这意味着它不一定与我想要的 API 和其他解决方案有关(例如 $.JSON().done())也不合作。

我的代码非常少:

<button onclick="getEndDate()">Click Me</button>

<script>
  function getEndDate() {
  alert("in function");
  // create request
  var request = new XMLHttpRequest()
  alert("request made");
  // request data from API (API link automatically generated)
request.open('GET', 'https://holidayapi.com/v1/holidays?key=validkey&country=US&year=2018&pretty', true)
  alert("request opened"+ request.status);
  // send request (?)
  request.send()
  alert("request sent");
request.onload = function() {
  alert("request loaded");
  var data = JSON.parse(this.response)
  // If we receive a valid code
  if (request.status >= 200 && request.status < 400) {
    data.forEach(holiday => {
      alert(holiday.name, holiday.date);
    })
  } else {
    alert('error');
  }
  }
}
</script>

我希望至少能够运行所有警报，但是我只能到达“请求已发送”，这意味着加载请求结果时出现问题。在状态中，如前所述，我期望得到 200 而不是 0。

我的处理方式完全错误吗？如果是这样，我应该尝试以什么方式调用 API？

Answer 1

XMLHttpRequest 的 send() 方法以某种同步方式运行。其部分行为可能是异步的，也可能不是异步的(取决于 .open() 的 异步标志)，但部分行为肯定是同步的。

设置事件处理程序(onload、onreadystatechange 等)是同步完成的。这就是 Internet Explorer 实现它的方式，自从 Microsoft 发明了 XMLHttpRequest 以来，规范也要求它实现它的方式。

具体来说，step 5 of the spec for .send()要求它:

5. If one or more event listeners are registered on the associated XMLHttpRequestUpload object, then set upload listener flag.

因此，事件监听器的设置是在 .send() 函数返回之前完成的，而不是在从网络收到响应时完成的。

所以在你的代码中你有:

request.send(); // send will now check if it has .onload registered and
                // set up appropriate event listeners.

request.onload = function() { /* ... */ } // too late, this is ignored

您需要通过 .onload、.onreadystatechange 等或通过 .addEventListener('load', ...) 在调用 .send() 之前。

请注意，在 XMLHttpRequest 使用的所有官方示例(whatwg 规范、MDN、MSDN 等)中，事件处理程序始终在 .open 之前设置() 所以我建议你也这样做，即使从技术上讲，规范允许你在 .open() 之后但在 .send() 之前执行此操作:

request.onload = function() { /* ... */ }
request.open('GET', url, true);
request.send();

过去(我不知道现在是否有)一些浏览器版本允许您在 .send() 之后设置事件处理程序，因为它们使用标准 EventEmitters 而不是以下规范。但这些实现在技术上并不符合标准，尽管感觉是正确的。