如何从公共 API 获取 JSON 响应到 JSON 对象？ [复制]答案

【问题标题】：How to get JSON response from public API into JSON object? [duplicate]如何从公共 API 获取 JSON 响应到 JSON 对象？ [复制]
【发布时间】：2019-08-18 15:52:30
【问题描述】：

我正在尝试从 OpenWeatherMap API 获取一些数据。当我使用所需的 API 密钥和位置数据发送请求时，一切都恢复正常。返回的数据似乎是 JSON 格式。但是，当我对字符串执行 JSON.parse() 函数时，会出现“输入意外结束”的错误。

我发现有趣的一件事是，如果我要将字符串存储到一个变量中，然后在 Chrome 的调试控制台中继续执行该函数，它就可以完成。

let jsonData;
let jsonActual;
function GetWeather(city, country){
  Http = new XMLHttpRequest();
  Http.open("GET", weatherUrl + city + "," + country + weatherKey);
  Http.send();
  Http.onreadystatechange=(e)=>{
    jsonData = Http.response;
    jsonActual = JSON.parse(jsonData.toString());

  }
}

关于使用控制台：

x = JSON.parse(jsonData) // Completes successfully

【问题讨论】：

您没有在onreadystatechange 事件处理程序中检查readyState。只有当readyState 为complete 时，响应才会完成。

标签： javascript api xmlhttprequest

【解决方案1】：

永远不会检查您的readyState 是否为complete：

Http.onreadystatechange = e => {
    if (this.readyState == "complete") {
        jsonData = Http.response;
        jsonActual = JSON.parse(jsonData.toString());
    }
}

您也可以检查4：

Http.onreadystatechange = e => {
    if (this.readyState == 4) {
        jsonData = Http.response;
        jsonActual = JSON.parse(jsonData.toString());
    }
}

你可以让它变得更简单并使用fetch：

let jsonData;
let jsonActual;
function GetWeather(city, country){
    fetch(`${weatherUrl}${city},${country}${weatherKey}`).then(res => res.json()).then(res => {
        jsonData = res;
        jsonActual = JSON.parse(res);
    });
}

【讨论】：

res.json() 返回解析的数组/对象...对 JSON.parse() 毫无意义
哦，是的，对不起@charlietfl。

【解决方案2】：

在你的函数onreadystatechange 你有

Http.onreadystatechange=(e)=>{
    jsonData = Http.response;
    jsonActual = JSON.parse(jsonData.toString());

  }

尝试这样做：

Http.onreadystatechange=(e)=>{
    if (this.readyState === 4) {
         jsonData = Http.response;
         jsonActual = JSON.parse(jsonData.toString());
    }

  }

【讨论】：