27 与 API 交互之显示数据与错误处理

在前面的章节中，我们讨论了如何处理异步请求，使用 Fetch API 获取数据。在这一篇中，我们将进一步探讨如何将从 API 获得的数据展示出来，同时处理可能出现的错误。在实际开发中，展示数据和错误处理是用户体验的重要组成部分，合理的反馈可以显著提升用户的使用体验。

一、基础准备

我们假设您已经在上一篇中完成了与 API 的异步请求部分。这里我们将继续使用 React 和 TypeScript，并假设您正在从一个 RESTful API 中获取一些用户数据。

示例 API

我们将使用以下假设 API 进行演示：

• GET https://jsonplaceholder.typicode.com/users - 获取用户列表

二、组件结构

我们将创建一个新的组件 UserList，用于展示用户信息和处理错误。以下是组件的结构：

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

interface User {
  id: number;
  name: string;
  email: string;
}

const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUsers(data);
      } catch (error: any) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

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

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

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  );
};

export default UserList;

代码解析

1. 状态管理：

   • users 存储用户数据。
   • loading 追踪数据加载状态。
   • error 存储可能出现的错误信息。

2. 副作用：

   • 使用 useEffect 进行组件挂载后的数据请求。
   • fetchUsers 异步请求用户数据，处理成功与错误的情况。

3. 展示逻辑：

   • 如果 loading 为 true，显示 “加载中…”。
   • 如果出现错误，显示错误信息。
   • 如果数据成功加载，展示用户的列表。

三、错误处理策略

在我们上面的例子中，我们简单地使用了 try-catch 来捕获 API 请求中可能发生的错误。这是一个基本的错误处理方式，但在实际生产环境中，您可能需要考虑更复杂的情况，比如：

• 网络请求失败
• 响应数据格式不符合预期
• API 返回的错误信息处理

处理 HTTP 错误

我们在上面的代码中检查了 response.ok，如果状态码不是 200-299，抛出错误。为不同状态码提供更具体的错误响应也很重要：

if (!response.ok) {
  switch (response.status) {
    case 404:
      throw new Error('资源未找到');
    case 500:
      throw new Error('服务器错误');
    default:
      throw new Error(`请求失败: ${response.status}`);
  }
}

四、案例展示

下面是如何在主应用中使用 UserList 组件的示例：

import React from 'react';
import UserList from './UserList';

const App: React.FC = () => {
  return (
    <div>
      <h1>用户列表</h1>
      <UserList />
    </div>
  );
};

export default App;

五、总结

本节内容展示了如何与 API 交互并显示获取的数据，特别是如何处理错误并构建良好的用户体验。在实际开发中，这些技能是必不可少的。接下来，我们将进入项目构建与优化的部分，学习如何使用 Create React App 对我们的项目进行构建和优化。

请保持对异步操作和状态管理机制的理解，这将在你接下来的开发中大有裨益！