与后端对话：在React中优雅地请求API数据 (Fetch/Axios)

发布于：2025-09-03 ⋅ 阅读:(20) ⋅ 点赞:(0)

与后端对话：在React中优雅地请求API数据 (Fetch/Axios)

作者：码力无边

各位React全栈工程师（预备役），欢迎来到《React奇妙之旅》的第十五站！我是你们的通信官码力无边。在之前的旅程中，我们已经学会了构建复杂的UI、管理组件状态，甚至使用React Router搭建了多页面的应用骨架。我们的应用现在看起来很“丰满”，但它仍然像一个活在“桃花源”里的“单机应用”——所有的数据都是我们硬编码在前端的。

一个真正的Web应用，其生命力在于与后端服务器的数据交互。我们需要从服务器获取最新的文章列表，需要将用户的注册信息提交到数据库，需要更新商品的库存状态。前端与后端的“对话”，是让应用变得“鲜活”和“真实”的关键。

今天，我们将专注于建立这条通信的桥梁。我们将学习如何在React组件中，使用现代JavaScript的Fetch API以及社区中最流行的HTTP客户端库Axios，来执行网络请求。我们不仅仅是简单地发出请求，更重要的是，我们将探讨一套优雅地处理API请求生命周期的最佳实践：如何管理加载中（Loading）、成功（Success）和失败（Error）这三种核心状态，并根据这些状态来动态地更新我们的UI。

第一章：API请求的“舞台”—— useEffect Hook

我们首先要明确一个问题：在React组件的哪个生命周期阶段发起API请求最合适？

回忆一下我们在第七篇文章中学到的useEffect。它的核心使命就是处理副作用（Side Effects），而网络请求正是最典型的副作用之一。

为什么是useEffect？

  • 避免阻塞渲染：直接在组件函数主体中执行fetch，会在每次渲染时都触发请求，并且可能阻塞UI渲染。useEffect中的代码会在组件渲染到屏幕之后异步执行，保证了流畅的用户体验。
  • 控制执行时机：通过useEffect的依赖项数组，我们可以精确地控制请求的时机：
    • []（空数组）：只在组件首次挂载时请求一次，非常适合获取初始列表数据。
    • [someId]：当someId变化时重新请求，适合获取详情页数据。

黄金法则：将你的API请求逻辑，放在useEffect Hook中。

第二章：两位“信使”—— Fetch API vs. Axios

在JavaScript中发送HTTP请求，我们主要有两个选择：

1. Fetch API
  • 身份：浏览器内置的现代API，无需安装任何库。
  • 优点：
    • 原生支持，无额外依赖。
    • 基于Promise，语法简洁。
  • 特点/“坑”点：
    • 返回的响应体需要手动调用.json()或.text()等方法来解析。这是一个两步过程。
    • 默认不携带cookie，需要手动配置credentials: 'include'。
    • 对于4xx或5xx的HTTP错误状态（如404, 500），fetch的Promise不会被reject，它只会在网络层面失败（如DNS错误）时才会reject。你需要手动检查response.ok或response.status来判断请求是否真的成功。
    • 没有内置的请求超时处理或取消请求的功能（虽然可以通过AbortController实现，但相对繁琐）。
2. Axios
  • 身份：一个非常流行的、功能强大的第三方HTTP客户端库。
  • 安装：npm install axios
  • 优点：
    • 自动转换JSON数据：请求和响应数据都会自动处理。
    • 更广泛的浏览器兼容性：内部会处理一些老旧浏览器的兼容问题。
    • 错误处理更直观：任何非2xx的状态码都会导致Promise被reject，可以直接在.catch块中捕获。
    • 内置丰富功能：支持请求/响应拦截器、取消请求、超时配置、CSRF保护等。

如何选择？

  • 对于简单的小项目或你想保持依赖最小化，Fetch API完全足够，但要记住处理它的“坑”点。
  • 对于大多数生产级别的项目，强烈推荐使用Axios。它提供的便利性和强大功能，能极大地提升开发效率和代码的健壮性。

本篇文章将同时演示两者的用法，但更侧重于构建健壮的逻辑。

第三章：实战演练 —— 获取文章列表

我们的目标是创建一个PostList组件，它会从JSONPlaceholder这个公开的API获取文章列表并显示。

核心逻辑：管理三种状态
在发起请求时，我们的组件会经历三种可能的状态，我们需要用useState来追踪它们：

  • data: 存储成功获取到的数据。
  • isLoading: 一个布尔值，表示请求是否正在进行中。
  • error: 存储请求过程中发生的错误对象。
版本一：使用Fetch API
import React, { useState, useEffect } from 'react';

function PostListWithFetch() {
  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 定义一个异步函数，因为useEffect的回调函数本身不能是async的
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10');
        
        // 关键：手动检查HTTP状态
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        setPosts(data);
      } catch (e) {
        setError(e.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();

  }, []); // 空依赖数组，只在挂载时执行一次

  // 根据状态渲染不同的UI
  if (isLoading) {
    return <div>Loading posts...</div>;
  }

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

  return (
    <div>
      <h1>Posts (Fetched with Fetch API)</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default PostListWithFetch;

代码解读：

  1. 我们用async/await语法让异步代码看起来更像同步代码，可读性更好。
  2. 我们在try...catch...finally块中执行请求。
    • try: 包含可能成功的代码。
    • catch: 捕获网络错误或我们手动抛出的HTTP错误。
    • finally: 无论成功还是失败，最后都会执行，是设置setIsLoading(false)的绝佳位置。
  3. 我们根据isLoading和error的值，实现了条件渲染，为用户提供了清晰的界面反馈。
版本二：使用Axios

首先，安装axios。然后创建组件：

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

function PostListWithAxios() {
  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10');
        // axios的响应数据在 response.data 中
        setPosts(response.data);
      } catch (e) {
        // axios会自动处理非2xx状态码，直接在这里捕获
        setError(e.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();

  }, []);

  // UI渲染部分与Fetch版本完全相同
  if (isLoading) return <div>Loading posts...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts (Fetched with Axios)</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default PostListWithAxios;

对比一下：
Axios的代码明显更简洁。我们不再需要手动检查response.ok，也不需要调用.json()。错误处理逻辑也更统一。

第四章：封装成自定义Hook useApi

你可能已经发现了，这种管理data, isLoading, error的模式，在每次API请求中都会重复。这正是封装自定义Hook的完美场景！

让我们创建一个useApi Hook，来处理所有GET请求的通用逻辑。

src/hooks/useApi.js

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

function useApi(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true); // 每次url变动时重置加载状态
      setError(null);
      
      try {
        const response = await axios.get(url);
        setData(response.data);
      } catch (e) {
        setError(e.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();

  }, [url]); // 依赖项是url，url变化时重新请求

  return { data, isLoading, error };
}

export default useApi;

现在，我们的组件可以变得多么优雅：

PostListFinal.jsx

import React from 'react';
import useApi from '../hooks/useApi'; // 导入我们的Hook

function PostListFinal() {
  const { data: posts, isLoading, error } = useApi('https://jsonplaceholder.typicode.com/posts?_limit=10');

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts (Fetched with Custom Hook)</h1>
      <ul>
        {posts && posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

通过自定义Hook，我们把数据请求的复杂性完全封装了起来，让组件只专注于如何展示数据。这是React开发中非常重要的一种抽象和分层思想。

总结：让你的应用连接世界

今天，我们成功地打通了React应用与后端服务器之间的通信链路。我们不仅学会了如何发送API请求，更重要的是，掌握了一套健壮的、可复用的模式来处理数据请求的整个生命周期。

让我们回顾一下今天的核心要点：

  1. useEffect是执行API请求副作用的最佳场所，它能保证请求在渲染后异步执行，并能通过依赖项精确控制请求时机。
  2. Fetch API是浏览器原生选择，轻量无依赖，但需要手动处理HTTP错误和数据解析。Axios是功能强大的第三方库，简化了请求流程和错误处理，是生产项目的首选。
  3. 管理三种核心状态 (data, isLoading, error) 是处理API请求的最佳实践，它能为用户提供清晰的UI反馈。
  4. 将数据请求逻辑封装成自定义Hook（如useApi） 是React中实现逻辑复用和代码分离的终极武器，能让你的组件代码保持简洁和专注。

现在，你的React应用不再是一个孤岛，它已经具备了与广阔的互联网世界进行数据交换的能力。你可以去尝试获取天气信息、电影列表，或者对接你自己开发的后端API。

在下一篇文章中，我们将进入一个更高级的主题：企业级状态管理。当应用的状态变得非常复杂，跨组件共享和更新的需求变得频繁时，useState和useContext可能就显得力不从心了。届时，我们将学习现代Redux的官方推荐方案——Redux Toolkit，看看它是如何帮助我们优雅地管理大型应用的状态的。

我是码力无边，为你的应用成功“联网”而喝彩！去享受从真实API获取数据并渲染到页面的成就感吧！我们下期再会！

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布