异步/等待未能获取JSON数据

时间:2019-02-07 09:18:13

标签: javascript promise async-await

我正在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);

问题在于仅异步功能中的catch块已在运行。我确信我已经在控制台上测试了Ajax请求中的响应文本。但是我不知道await语句如何失败。

我该如何解决?我缺少哪一部分?

1 个答案:

答案 0 :(得分:3)

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

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

如果readystate不是4且status不是200,则您拒绝诺言。但这还为时过早。如果您检查:

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);
  }
}