Fetch API返回值获取问询：能否直接从fetch函数获取结果？

你提到的第二种写法里，data变量其实是一个Promise实例，并不是你期望的JSON数据或错误——这就是为什么Chrome控制台里看到它被包装起来的原因。因为fetch本身是异步函数，返回的就是Promise，而链式调用的.then()和.catch()也都会返回新的Promise，所以整个表达式的结果是Promise对象，而非直接的最终值。

为什么不能直接赋值拿到结果？ #

JavaScript的异步操作不会阻塞代码执行，当你把fetch(...)的链式调用赋值给data时，异步请求还在后台进行，此时data只是一个未完成的Promise，只有当异步操作结束后，通过Promise的回调或者await才能拿到真实的结果。

而且你的第一种写法也存在隐患：如果在fetch完成前就访问data，它会是undefined，因为赋值操作是在异步回调里执行的，时序上晚于同步代码。

正确的两种处理方式 #

方式1：使用async/await（更直观的同步风格写法）

这是现在更推荐的写法，能让异步代码看起来像同步代码，可读性更强：

async function getFetchData() {
  try {
    // 等待fetch完成拿到响应
    const response = await fetch(someUri);
    // 等待响应解析为JSON
    const data = await response.json();
    // 在这里处理你的数据，比如打印、渲染到页面等
    console.log(data);
    return data;
  } catch (error) {
    console.error('请求出错:', error);
    return error;
  }
}

// 调用函数时，要么在另一个async函数里用await：
async function main() {
  const data = await getFetchData();
  // 这里可以使用data
}
main();

// 或者用.then()处理（如果在全局环境或非async函数里）：
getFetchData().then(data => {
  // 处理data
});

方式2：继续使用.then()链式调用

如果习惯回调风格，就把数据处理逻辑放在最后一个.then()里，而不是试图把Promise直接赋值给变量：

fetch(someUri)
  .then(response => response.json())
  .then(data => {
    // 在这里直接处理数据，这是唯一能确保拿到真实数据的地方
    console.log('拿到的数据:', data);
    // 可以在这里把数据保存到变量、状态或者渲染页面
    return data;
  })
  .catch(error => {
    console.error('请求失败:', error);
    return error;
  });

总结 #

fetch是异步操作，无法直接通过赋值拿到最终结果，必须等待异步操作完成后，通过Promise的回调机制（.then()）或者async/await语法来获取和处理数据。这样才能避免时序问题，确保你拿到的是真实的JSON数据或错误信息。

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