JavaScript中API返回数据赋值变量报错问题求助

云原生阿岚

2026-7-24

异步API调用导致的数据访问问题分析与解决

核心问题：异步操作的执行顺序

你的get_data()函数里用了fetch发起异步请求，这类操作不会阻塞代码执行——函数会先走完同步逻辑，直接返回undefined，这时候外部执行var data = get_data()拿到的是undefined，自然会报“Cannot read properties of undefined (reading 'city')”的错。而函数内部能正常打印数据，是因为打印语句写在.then()回调里，这部分代码会等到API返回数据后才执行，此时已经拿到了完整的响应数据。

两种解决办法

方法1：用async/await简化异步逻辑

把get_data改成异步函数，调用时通过await等待数据返回：

async function get_data() {
  const res = await fetch('目标API地址');
  const data = await res.json();
  console.log(data.city); // 内部正常打印
  return data;
}

// 必须在async函数内使用await
async function processData() {
  const data = await get_data();
  console.log(data.city); // 外部可正常访问
}
processData();

方法2：返回Promise，外部用.then()处理

如果不想用async/await，让函数直接返回Promise对象，外部通过回调获取数据：

function get_data() {
  return fetch('目标API地址')
    .then(res => res.json())
    .then(data => {
      console.log(data.city);
      return data;
    });
}

// 外部调用时通过then接收数据
get_data().then(data => {
  console.log(data.city); // 正常访问属性
});