调用天气API无法获取lat、lon数据，求JavaScript/JQuery解决方法

问题出在你没有正确解析fetch返回的响应数据——fetch的then回调里拿到的response是Response对象，不是直接的JSON数据，必须先解析成JavaScript对象才能访问里面的属性。

JavaScript原生写法（修正后的fetch代码） #

fetch(coordRequestPath)
  .then(function(response) {
    // 先将响应解析为JSON格式的JavaScript对象
    return response.json();
  })
  .then(function(data) {
    // 解析后的数据是数组，取第一个元素的lat和lon
    cityLat = data[0].lat;
    cityLon = data[0].lon;
    console.log("Latitude: " + cityLat + " Longitude: " + cityLon);
  })
  .catch(function(error) {
    // 处理请求或解析过程中的错误
    console.error("请求或解析出错:", error);
  });

jQuery写法 #

如果用jQuery的$.ajax，会自动帮你解析JSON，代码更简洁：

$.ajax({
  url: coordRequestPath,
  method: 'GET',
  dataType: 'json'
})
.done(function(data) {
  cityLat = data[0].lat;
  cityLon = data[0].lon;
  console.log("Latitude: " + cityLat + " Longitude: " + cityLon);
})
.fail(function(error) {
  console.error("请求出错:", error);
});

关键说明 #

• fetch返回的Response对象只是HTTP响应的包装，包含状态码、headers等信息，必须通过.json()（或其他方法如.text()）来提取并解析响应体内容。
• .json()方法返回一个Promise，所以需要再链式调用一个then来处理解析后的数据。

内容的提问来源于stack exchange，提问作者CCaballero