Question

我想使用Fetch API，但我不喜欢＃39;我真的明白它的机智。

我的HTML中有一个，我想用这段代码分配我的获取结果：

const weather = "http://api.apixu.com/v1/current.json?key=cba287f271e44f88a60143926172803&q=Paris";
const array = [];

fetch(weather)
.then(blob => blob.json())
.then(data => {
  array.push(data.current.humidity)
  console.log(array[0])
      }
);
 document.querySelector('h1').innerHTML = array[0];

我在console.log中得到了结果，但返回＆＃34;未定义＆＃34;。你能解释一下原因吗？

非常感谢

Answer 1

这是因为对API的调用是异步，这意味着代码在编写时不会逐行执行。回调仅在API调用完成后立即运行，基本上意味着

data => {
  array.push(data.current.humidity)
  console.log(array[0])
}

在

之后运行
document.querySelector('h1').innerHTML = array[0];

因此，当您尝试设置h1时，array仍为空。如果要在数据可用时立即设置，则必须在回调函数中进行设置：

data => { array.push(data.current.humidity) document.querySelector('h1').innerHTML = array[0]; }

这一开始可能看起来很奇怪，但请记住，您只注册了匿名函数，但尚未运行。您只需在发生某些事情时定义要触发的函数，在这种情况下：当您的API调用完成时。

FETCH API返回undefined

1 个答案: