使用Fetch获取JSON数据存入变量后返回undefined的解决方法

AI 小北

2026-8-6

问题分析

你这段代码存在两个关键问题：

fetchCities函数无返回值：内部then回调中的return data仅作用于该回调函数，并未作为fetchCities的返回值，因此调用fetchCities()会得到undefined。
未正确处理异步操作：Fetch API是异步执行的，无法通过同步赋值的方式直接获取异步操作的结果。

修复方案

方案1：返回Promise并通过`then`链式调用处理

修改fetchCities，让它返回整个Fetch的Promise链，之后在then回调中获取数据：

const fetchCities = () => {
  return fetch('cities.json')
    .then(response => response.json())
    .then(data => data);
}

fetchCities().then(cities => {
  console.log(cities);
  // 在此处进行后续数据操作，如存入变量、渲染页面等
});

方案2：使用`async/await`语法（更简洁直观）

通过async标记函数，await等待异步操作完成，让异步代码看起来像同步代码：

const fetchCities = async () => {
  const response = await fetch('cities.json');
  const data = await response.json();
  return data;
}

// await只能在async函数内使用，因此用立即执行的async函数包裹调用逻辑
(async () => {
  const cities = await fetchCities();
  console.log(cities);
  // 后续业务逻辑写在这里
})();

注意事项