javascript - Async/Await 无法获取 JSON 数据

Question

我正在 Windows 上的 vagarnt 上运行 ubuntu 服务器。我在文件夹的文档根目录中有一个 JSON 文件。我想使用 async/await 来获取 JSON 数据。这是我在谷歌搜索和学习后想出的代码。

    async function getJSON() {
    try {
      var result = await makeRequest("GET", "./form-data/test-items/test.json");
      console.log(result);
    } catch(error) {
      console.log(error);
    }
  }

  function makeRequest(method, url) {
    return new Promise(function(resolve, reject) {
      let xhr = new XMLHttpRequest();
      xhr.overrideMimeType("application/json");
      xhr.addEventListener("readystatechange", function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var respond = xhr.responseText;
          resolve(respond);
        } else {
          reject(xhr.statusText);
        }
      }, false);
      xhr.open(method, url, true);
      xhr.send();
    });
  }

  document.addEventListener("DOMContentLoaded", getJSON, false);

问题在于，只有 async 函数中的 catch block 一直在运行。我确信我从 Ajax 请求中获得了响应文本，因为我已经在控制台上对其进行了测试。但我不知道await语句是如何失败的。

我该如何解决这个问题？我错过了哪一部分？

Answer 1

问题是一个简单的逻辑错误。这里:

if (xhr.readyState === 4 && xhr.status === 200) {
  var respond = xhr.responseText;
  resolve(respond);
} else {
  reject(xhr.statusText);
}

如果readystate不是4并且status不是200，你就拒绝了这个promise。但是现在下结论还为时过早。如果您检查:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState

您会注意到readyState可以有5个不同的值。没有一个表明错误。

结论，尝试这样的事情:

if (xhr.readyState === 4) {
  if (xhr.status === 200) {
    resolve(xhr.responseText);
  }
  else {
    reject(xhr.statusText);
  }
}