Fetch请求调用response.json()返回undefined，异步改写后仍无效如何解决

• 原始fetch封装问题：没有返回整个fetch的Promise链，函数执行后无返回值，自然得到undefined
• async修改后问题：最终没有return拿到的jsonResponse，async函数默认返回空Promise，且多余混用await和.then写法，逻辑冗余
• React组件调用问题：async函数返回的是Promise对象，直接同步调用拿到的是Promise而非实际数据，React组件渲染是同步逻辑，不能在顶层直接等待异步结果，必须配合状态钩子实现

正确封装httpGet方法 #

async function httpGet(theUrl) {
  const response = await fetch(theUrl, {
    method: "GET",
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
  });
  // 新增错误判断，处理非2xx状态的异常场景
  if (!response.ok) {
    throw new Error(`请求错误，状态码：${response.status}`);
  }
  return await response.json();
}

正确的React组件调用写法 #

import { useState, useEffect } from 'react';

function Admin() {
  // 用state存储接口数据、加载状态、错误信息
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 用useEffect在组件挂载时触发异步请求
  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await httpGet('https://jsonplaceholder.typicode.com/users');
        setData(result);
        console.log(result); // 此处可正常拿到返回数据
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // 空依赖数组表示组件挂载时仅执行一次

  // 加载态展示
  if (loading) return <div>加载中...</div>;
  // 错误态展示
  if (error) return <div>请求失败：{error}</div>;

  return (
    <div>
      <h1> Admin Page</h1>
      {/* 拿到数据后可正常渲染 */}
      {data && data.map(user => <p key={user.id}>{user.name}</p>)}
    </div>
  )
}

• 所有带async关键字的异步函数返回值都是Promise对象，必须通过await或者.then()才能获取到内部的实际返回值
• React函数组件的渲染逻辑是同步执行的，不能在组件顶层写await阻塞渲染，所有异步请求都要放在useEffect钩子中触发，拿到结果后更新state触发组件重渲染，才能把数据展示到页面上
• 尽量不要混用async/await和.then()链式写法，选择一种风格保持代码统一即可，避免逻辑混乱

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