使用Fetch API获取数据后storedData为空的问题咨询

这是因为Fetch API是异步操作，代码执行顺序是这样的：

1. 定义newUrl和storedData空数组
2. 发起fetch请求（浏览器开始后台请求数据，主线程继续执行后续代码）
3. 立刻执行console.log(storedData)，这时候fetch的响应还没回来，then里的赋值逻辑根本没触发，所以输出空数组
4. 等fetch请求完成后，才会依次执行两个then里的回调，把数据赋值给storedData，但这时候console.log早就跑完了

解决办法一：把依赖异步结果的代码放到then回调里 #

直接把console.log移到第二个then中，确保在数据赋值完成后再执行：

let newUrl = url.toString()
let storedData = [];
fetch(newUrl)
.then((response) => {
 return response.json();
})
.then((data) => {
  storedData = data;   
  console.log(storedData); // 这里能正常拿到数据
});

解决办法二：用async/await语法简化异步代码 #

这种写法让异步代码看起来像同步执行，更易读：

async function fetchAndLogData() {
  let newUrl = url.toString()
  let storedData = [];
  // 等待fetch请求完成
  const response = await fetch(newUrl);
  // 等待响应体解析为JSON
  storedData = await response.json();
  console.log(storedData); // 数据赋值完成后再打印
}

// 调用这个异步函数
fetchAndLogData();

总结一下：所有需要用到异步请求返回数据的代码，都必须放在异步操作完成后的回调里，或者用await等待异步操作结束后再执行。

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