请求状态处理（加载中/失败）

在 React 中，发送异步请求时，我们通常需要根据请求的状态（加载中、失败、成功）来更新组件的显示。良好的请求状态管理可以帮助提高应用的可用性和用户体验。

1. 管理请求状态

我们可以使用 React 的 useState 钩子来管理加载状态和错误信息。以下是一个基本的示例，展示如何处理加载、成功和失败的请求状态。

示例：请求状态管理

import { useState, useEffect } from 'react';
import axios from 'axios';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true); // 开始加载
      setError(null); // 清空错误信息

      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data); // 设置请求成功的响应数据
      } catch (error) {
        setError('请求失败，请稍后重试'); // 设置错误信息
      } finally {
        setLoading(false); // 请求完成，停止加载
      }
    };

    fetchData();
  }, []); // 组件加载时触发请求

  if (loading) {
    return <div>加载中...</div>; // 加载中的状态
  }

  if (error) {
    return <div>{error}</div>; // 请求失败时的错误提示
  }

  return <div>{JSON.stringify(data)}</div>; // 显示请求成功的数据
}

代码解析

• 加载状态（loading）：在请求开始时，设置 loading 为 true，请求结束后（无论成功还是失败），将其设置为 false。在 loading 为 true 时，可以显示一个加载中的提示。
• 错误状态（error）：在请求过程中，如果发生错误（如网络问题、请求失败等），通过 catch 捕获异常，并更新 error 状态。请求失败时，可以显示相应的错误信息。
• 请求成功（data）：当请求成功时，将返回的数据存储在 data 状态中，并显示在页面上。

2. 使用 fetch 处理请求状态

如果你使用的是原生 fetch API，处理方式也类似：

import { useState, useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = () => {
      setLoading(true); // 开始加载
      setError(null); // 清空错误信息

      fetch('https://api.example.com/data')
        .then(response => {
          if (!response.ok) {
            throw new Error('网络响应失败');
          }
          return response.json();
        })
        .then(data => setData(data)) // 设置请求成功的响应数据
        .catch(error => setError('请求失败，请稍后重试')) // 设置错误信息
        .finally(() => setLoading(false)); // 请求完成，停止加载
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>加载中...</div>; // 加载中的状态
  }

  if (error) {
    return <div>{error}</div>; // 请求失败时的错误提示
  }

  return <div>{JSON.stringify(data)}</div>; // 显示请求成功的数据
}

3. 总结

• 在 React 中处理请求状态时，可以使用 useState 来管理加载中、错误和成功的状态。
• 通过 try-catch 机制处理请求的错误，并通过 finally 来确保加载状态的更新。
• 对于加载中、失败、成功的不同状态，可以通过条件渲染来提供不同的用户界面反馈，提升用户体验。

通过合理的请求状态管理，用户在访问应用时会获得更清晰的信息提示，提升交互体验。