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

URL: https://caijiao.org/react/chapter11/request-states
Source: docs/react/chapter11/request-states.md
Description: 在 React 中处理请求状态（如加载中、请求失败等）是开发中常见的需求。通过管理加载状态、错误信息以及成功数据的展示，可以提供更好的用户体验。本文将介绍如何处理请求状态。

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

## 1. 管理请求状态

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

### 示例：请求状态管理

```jsx
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，处理方式也类似：

```jsx
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` 来确保加载状态的更新。
* 对于加载中、失败、成功的不同状态，可以通过条件渲染来提供不同的用户界面反馈，提升用户体验。

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