异步/等待无法获取 JSON 数据 [重复]

Posted 2023-02-27

【中文标题】异步/等待无法获取 JSON 数据 [重复]

【英文标题】：Async/Await Fails to fetch JSON data [duplicate]

【发布时间】：2019-07-01 08:50:20

【问题描述】：

我在 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 语句是如何失败的。

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

【问题讨论】：

我建议将其关闭为与How do I promisify native XHR? 重复（即使问题与问题本身完全不同）。由于该副本显示了如何通过详细解释正确地承诺XMLHttpRequest，并且此处已经存在的答案解释了给定代码的问题。

@t.niese 我也同意你的看法。我虽然它与异步/等待有关，但这只是逻辑错误。

【参考方案1】：

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

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

【讨论】：

或者使用load事件代替readystatechange事件

谢谢。此解决方案有效。我变得如此糊涂，以至于忘记检查语句的逻辑。我想我需要阅读 Web API。再次感谢。

@Quentin 你说得对，虽然我正在考虑遵循 t.niese 的建议，将其作为副本关闭...？！

@Quentin load 事件也有效。两者有区别吗？

@ZawW.Lwin — 这意味着您不需要检查 readyState 是否达到 4（但它不会捕获错误，因此您需要单独处理它们）。