使用React Hooks实现依赖请求完成的加载状态最佳实践

你的现有代码里，setLoading(false)确实是在请求完成（拿到响应并解析成JSON后）才执行的，但大概率是没在发起请求前开启加载状态，或者没处理请求失败的场景，才导致加载状态不符合预期。下面是标准的实现方案：

核心实现步骤 #

• 发起请求前立即设置加载状态为true，给用户即时的加载反馈
• 用try/catch/finally包裹请求逻辑，确保无论请求成功还是失败，加载状态都会被重置
• 额外处理HTTP错误（比如404/500），因为fetch仅在网络层面失败时才会抛出异常

修正后的代码示例 #

const fetchUsers = async () => {
  // 发起请求前开启加载状态
  setLoading(true);
  try {
    const res = await fetch(`${process.env.REACT_APP_GITHUB_URL}/users`, {
      headers: {
        // 注意：授权头必须放在headers对象内，原写法会导致请求无法正确携带授权信息
        Authorization: `token ${process.env.REACT_APP_GITHUB_TOKEN}`
      }
    });

    // 手动校验HTTP响应状态，处理4xx/5xx等错误
    if (!res.ok) {
      throw new Error(`请求失败: ${res.status}`);
    }

    const users = await res.json();
    setUsers(users);
  } catch (err) {
    // 这里可以添加错误提示逻辑，比如设置错误状态给前端展示
    console.error('获取用户列表失败:', err);
    // setError(err.message);
  } finally {
    // 无论请求成功或失败，最终都关闭加载状态
    setLoading(false);
  }
};

关键细节说明 #

1. 请求前开启加载：必须在调用fetch前执行setLoading(true)，避免出现请求已经开始但加载状态没更新的延迟问题
2. headers的正确写法：原代码中直接把Authorization放在fetch配置对象里是错误的，必须嵌套在headers中才能生效
3. HTTP错误处理：fetch不会自动把HTTP错误（如404）转为异常，需要通过res.ok判断后手动抛出错误，确保错误场景也能进入catch块
4. finally块的必要性：finally内的代码无论try成功还是catch触发都会执行，彻底避免加载状态一直挂着的情况

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