使用Fetch API获取数据遇异常：控制台点击前返回空值

你遇到的问题本质是没有正确等待异步操作完成就去访问数据，控制台里的“空值”其实是未完成的Promise对象，浏览器会在你点击时才解析它的真实值，但代码里不会自动等待。

正确的异步处理写法（用async/await） #

直接用async/await语法等待Fetch的Promise完成，确保拿到真实数据后再使用：

async function getFetchData() {
  try {
    // 等待请求响应返回
    const response = await fetch('你的接口URL');
    // 检查请求是否成功（状态码200-299）
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    // 等待解析数据（根据接口返回格式选json()/text()/blob()）
    const realData = await response.json();
    
    // 这里可以放心使用realData，比如更新页面、执行业务逻辑
    console.log('真实数据：', realData);
    return realData;
  } catch (err) {
    console.error('数据获取失败：', err);
  }
}

// 调用函数并在拿到数据后处理
getFetchData().then(data => {
  if (data) {
    // 你的业务代码，比如渲染到DOM
    // document.getElementById('content').textContent = JSON.stringify(data);
  }
});

避免错误写法 #

之前你可能像下面这样写，导致拿到的是Promise对象而非真实数据：

// 错误示例：直接赋值Promise，没有等待异步操作完成
const data = fetch('接口URL').then(res => res.json());
console.log(data); // 打印的是Promise对象，代码里无法直接使用内部数据

你提供的控制台截图 #

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