为什么我在调用 API 时收到此错误

Question

var path = "http://api.openweathermap.org/data/2.5/find?q=";
var city = "London";
var apiKey= "&appid=eb5eacd85411228f461a151003d9bf07";
var url = path + city+ apiKey;



function getTemp(){
fetch(url)
.then(response => response.json())
.then(data => {
  var nameValue= data.name;
  var tempr = data.main.temp;
  document.querySelector("h1").innerHTML= nameValue;
  document.querySelector("h2").innerHTML= tempr;


})}
getTemp();

运行此代码时出错。请帮我解决这里的问题。

Answer 1

这个API的响应结构不是直接返回data.main.temp，这个API的顶层返回

"message": message,
  "cod": cod,
  "count": count,
  "list": [{"main": {"temp"}}]

因此要访问 temp，您应该导航到列表或直接访问您想要的记录，例如 data.list[index].main.temp 索引可以为 0 或取决于您在 data.count 上确定的列表大小

Answer 2

我认为 this(data.main) 可能不是来自响应。 尝试控制台记录整个响应，并检查响应是否到来。

获取（网址） .then(response => response.json()) .then(data => console.log(data))