26 在 React + TSX 中处理异步请求

在前面的内容中，我们使用 Axios 来获取数据并与 API 进行交互。在这一篇中，我们将深入探讨如何处理异步请求。这包括处理请求的 loading 状态、success 状态和 error 状态，让我们的应用更加健壮和用户友好。

理解异步请求的生命周期

在与 API 交互时，异步请求通常有三个主要的状态：

1. 加载中（Loading）：请求正在进行，用户需要一些视觉反馈。
2. 成功（Success）：请求成功完成，数据已被接收。
3. 错误（Error）：请求失败，可能是由于网络问题或其他原因。

在我们的示例中，我们将使用 Axios 发起请求，并结合这些状态进行相应的处理。

示例代码

下面是一个简单的示例，我们创建一个组件，它将请求数据并相应处理不同的状态：

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

interface DataItem {
  id: number;
  title: string;
}

const DataFetcher: React.FC = () => {
  const [data, setData] = useState<DataItem[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await axios.get<DataItem[]>('https://api.example.com/data');
        setData(response.data);
      } catch (err) {
        setError('请求数据时发生错误');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

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

  if (error) {
    return <div>错误: {error}</div>;
  }

  return (
    <div>
      <h1>数据列表</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetcher;

代码解析

1. 状态管理：

   • 我们使用 useState 钩子来管理三个状态：data, loading, error。
   • 初始状态中，loading 设置为 true，data 为一个空数组，error 为 null。

2. 异步请求：

   • 使用 useEffect 钩子，从 API 获取数据。调用一个 fetchData 异步函数。
   • 在请求开始时，将 loading 状态设为 true。
   • 使用 axios.get 发送 GET 请求并获取数据。

3. 错误处理：

   • 在 try...catch 结构中捕获任何错误，并将错误消息保存到 error 状态中。
   • 无论请求成功与否，最终都会在 finally 块中将 loading 状态设为 false，以结束加载状态。

4. 条件渲染：

   • 如果 loading 为 true，则显示加载中的文本。
   • 如果 error 不为 null，则显示错误信息。
   • 如果以上两个状态都不满足，显示获取到的数据。

总结

在这一篇中，我们通过处理异步请求和相应的状态来增强了用户体验。通过这种方式，我们能够清晰地告知用户请求的进度，从而构建出更友好的应用。

在下一篇中，我们将进一步讨论如何显式地将获取到的数据渲染到界面上，并处理可能出现的错误情况，让我们的应用更加健壮。