第18章：React与API交互

在现代Web应用开发中，前端与后端的交互是必不可少的一部分。React作为前端框架，可以通过与API（应用程序编程接口）通信，获取数据并更新组件的状态。本章将讲解如何在React中使用API进行数据交互，包括数据请求、状态管理、错误处理等关键内容。

18.1 简要说明：React与API交互的重要性

React组件通常是无状态的，但为了与外部数据源（如数据库、第三方服务等）交互，我们需要通过API请求获取数据。API交互的关键步骤包括：

发送请求：通过JavaScript的fetch方法或第三方库（如axios）向后端发送HTTP请求。
处理响应：接收并解析后端返回的数据。
更新组件状态：将获取到的数据更新到React组件的状态中，以驱动视图的重新渲染。
错误处理：当请求失败或发生网络错误时，捕获错误并提供友好的反馈。
加载状态：在等待数据时，显示加载指示器以提升用户体验。

18.2 关键知识点

18.2.1 使用fetch或axios发送请求

React本身不提供与后端通信的功能，但开发者可以通过以下方式实现：

使用`fetch` API

fetch是JavaScript内置的API，支持发送网络请求。它返回一个Promise，可以使用.then()或async/await处理响应。

// 使用fetch获取数据
async function requestData() {
  try {
    const response = await fetch('https://api.example.com/users');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

// 在组件中使用
function UsersList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    requestData();
  }, []);

  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

使用`axios`

axios是一个流行的第三方库，用于发送HTTP请求。它支持 Promise API，功能更强大，支持拦截器、取消请求等。

// 安装axios：npm install axios
import axios from 'axios';

async function requestData() {
  try {
    const response = await axios.get('https://api.example.com/users');
    console.log(response.data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

何时使用`fetch`，何时使用`axios`

fetch：内置API，无需额外安装，适合简单的请求场景。
axios：功能更强大，适合需要复杂请求、拦截器或取消请求的场景。

18.2.2 处理异步数据加载

React中的状态管理对异步操作尤为重要。我们需要使用useState管理数据状态，并结合useEffect生命周期钩子在组件加载时发送请求。

import { useState, useEffect } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://api.example.com/users');
        if (!response.ok) {
          throw new Error('网络请求失败');
        }
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, []); // 空依赖数组，仅在首次加载时执行

  return (
    <div>
      <h2>用户列表</h2>
      {loading ? (
        <p>正在加载中...</p>
      ) : error ? (
        <p>错误：{error}</p>
      ) : (
        <ul>
          {users.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

18.2.3 错误处理与加载状态

在API交互中，错误处理和加载状态是提升用户体验的关键因素。

加载状态

通过设置loading状态，可以在等待数据时显示加载指示器，避免界面空白。

{loading ? (
  <div className="loading">
    <p>加载中...</p>
  </div>
) : (
  // 渲染数据
)}

错误处理

通过捕获错误并设置error状态，可以提供友好的错误提示。

{error && (
  <div className="error">
    <p>发生错误：{error}</p>
  </div>
)}

18.3 练习与示例

示例1：使用fetch获取数据
- 在组件中使用fetch发送GET请求。
- 更新组件状态并渲染数据。
- 处理加载状态和错误状态。
示例2：使用axios发送POST请求
- 在组件中使用axios发送POST请求。
- 提交表单数据到后端。
- 处理响应和错误。
示例3：综合案例
- 创建一个完整的组件，实现数据加载、错误处理和状态管理。
- 示例场景：获取商品列表并展示。

18.4 总结

本章讲解了React中如何与后端API进行交互的关键知识点，包括：

使用fetch或axios发送请求。
处理异步数据加载。
错误处理与加载状态管理。

通过这些内容的学习，你可以实现React组件与后端API的交互，为构建复杂的组件化应用打下基础。