如何将Fetch API返回的数组存入全局变量？

你的代码逻辑本身没问题，但问题出在异步操作的执行顺序上：

• fetch是异步网络请求，不会阻塞后续代码执行
• .then()里的赋值操作要等请求成功返回后才会触发
• 如果在请求完成前就访问data变量，它自然还是初始的undefined

解决方案1：在.then()回调内处理数据 #

所有依赖data的逻辑都要放在回调里，确保数据已经获取完成：

function getvals(){
  return fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
}

getvals().then(response => {
  const data = response;
  // 所有需要用到data的代码都写在这里
  console.log(data); // 这里能正常拿到完整数组
});

解决方案2：用async/await简化异步逻辑 #

async/await让异步代码看起来更像同步代码，可读性更强：

async function fetchPosts() {
  // 等待请求完成
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  // 等待响应转为json
  const data = await response.json();
  
  // 直接在这里处理数据
  console.log(data);
  return data;
}

// 如果需要全局变量存储：
let data;
fetchPosts().then(result => {
  data = result;
  // 同样，依赖data的逻辑要在这里执行
});

避坑提醒 #

不要在异步操作完成前访问data，比如下面的写法肯定会得到undefined：

let data;
getvals().then(response => {
  data=response;
})
console.log(data); // 这行代码会先执行，此时请求还没结束

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