如何实现内容加载状态

loading

success

error

// 假设这是在一个React组件或Vue setup中
import React, { useState, useEffect } from 'react';

function MyDataComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true); // 初始状态为加载中
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setIsLoading(true); // 确保每次请求前都设置为加载中
        setError(null); // 清除之前的错误状态

        const response = await fetch('/api/your-data-endpoint');
        if (!response.ok) {
          // 如果HTTP状态码不是2xx，抛出错误
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        // 捕获网络错误、解析错误或其他异常
        console.error("Failed to fetch data:", err);
        setError(err); // 存储错误对象
      } finally {
        setIsLoading(false); // 无论成功或失败，加载都已完成
      }
    };

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

  if (isLoading) {
    // 渲染一个加载指示器，比如一个旋转的spinner
    return <div className="loading-state">数据正在努力加载中...</div>;
  }

  if (error) {
    // 渲染错误信息，并提供重试选项
    return (
      <div className="error-state">
        <p>抱歉，加载内容失败了。{error.message}</p>
        <button onClick={() => window.location.reload()}>重新加载</button>
      </div>
    );
  }

  if (!data) {
    // 处理数据为空但没有错误的情况，比如API返回空数组
    return <div className="no-data-state">目前没有数据可显示。</div>;
  }

  // 数据加载成功并存在时，渲染实际内容
  return (
    <div className="content-display">
      <h1>内容标题</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      {/* 实际内容渲染逻辑 */}
    </div>
  );
}

export default MyDataComponent;

useEffect

onMounted

try...catch...finally

isLoading

error

TypeError: Failed to fetch

500 Internal Server Error

<!-- 示例错误显示 -->
<div class="error-panel">
  <p>哎呀，加载内容时遇到了点麻烦。</p>
  <p v-if="error.message.includes('Network')">似乎您的网络连接有问题，请检查一下。</p>
  <p v-else>服务器暂时无法响应，请稍后再试或联系客服。</p>
  <button @click="retryLoadData">重新加载</button>
</div>

<!-- 示例空数据显示 -->
<div class="empty-state-panel">
  <img src="/no-data-illustration.svg" alt="没有数据" />
  <h2>这里空空如也</h2>
  <p v-if="searchQuery">没有找到与“{{ searchQuery }}”相关的结果。</p>
  <p v-else>您还没有创建任何项目。</p>
  <button @click="goToCreatePage">去创建一个</button>
  <button v-if="searchQuery" @click="clearSearch">清除搜索</button>
</div>

MyDataComponent

useReducer

isLoading

error

data

isLoading

isError

data

import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['user', userId], // 唯一的查询键
    queryFn: async () => {
      const response = await fetch(`/api/users/${userId}`);
      if (!response.ok) throw new Error('Failed to fetch user data');
      return response.json();
    },
    // 还可以配置 refetchOnWindowFocus, staleTime 等
  });

  if (isLoading) return <p>加载用户资料...</p>;
  if (isError) return <p>加载用户资料失败: {error.message}</p>;

  return (
    <div>
      <h2>{data.name}</h2>
      <p>邮箱: {data.email}</p>
    </div>
  );
}

useQuery

data

isLoading

isError

error

useState

useEffect

allLoaded

isLoading

false

allLoaded

true

// 父组件中
const [isChild1Loading, setIsChild1Loading] = useState(true);
const [isChild2Loading, setIsChild2Loading] = useState(true);

// 假设子组件通过回调通知父组件加载状态
<ChildComponent1 onLoadingChange={setIsChild1Loading} />
<ChildComponent2 onLoadingChange={setIsChild2Loading} />

{ (isChild1Loading || isChild2Loading) && <GlobalPageSpinner /> }