如何让getData函数通过fetch API返回实际数据而非Promise对象？

核心原因 #

fetch 是异步API，本身返回Promise对象，你的getData函数里的then链式调用最终还是返回Promise，所以直接调用getData()得到的必然是Promise，而非实际数据——JS里异步操作无法同步返回结果。

解决方案1：使用async/await（更直观） #

把getData改成async函数，然后在异步环境中用await获取实际数据：

async function getData() {
  const response = await fetch('//some api url');
  const data = await response.json();
  return data;
}

// 必须在async函数内使用await
async function init() {
  const actualData = await getData();
  console.log(actualData); // 这里就是你要的实际数据
}
init();

// 模块导出建议：导出函数而非直接导出Promise结果
export async function fetchData() {
  return await getData();
}

解决方案2：延续.then()链式调用 #

如果不想用async/await，就在调用getData时通过then接收结果：

function getData() {
  // 注意要return整个fetch链式调用，否则函数默认返回undefined
  return fetch('//some api url')
    .then(response => response.json())
    .then(data => data);
}

// 调用时通过then获取实际数据
getData().then(actualData => {
  console.log(actualData);
  // 在这里处理数据，比如赋值、渲染等
});

// 模块导出函数，让调用方自行处理异步逻辑
export { getData };

关键提醒 #

永远不要尝试“同步获取异步数据”，这违背JS单线程异步机制，会导致页面阻塞或逻辑错误。所有依赖异步数据的操作，都要放在then回调里或者await之后。

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