使用 Axios 和 React-TanStack-Query 在 Next.js 中获取数据的完整指南

说实话：您可能熟悉 fetch API，以及 useState 和 useEffect。它可以工作，但很快就会变得笨拙。错误处理？ 一件苦差事。缓存？一场噩梦。 管理数据更新？忘了它吧！

但是如果数据获取可以更简单怎么办？ 输入 Axios 和 React-TanStack-Query，将数据管理从复杂的行为转变为平稳、高效的过程。

考虑一个电影列表应用程序。这些工具可以让您专注于构建功能，而不是重复的代码。准备好升级了吗？让我们开始吧！

---

为什么要放弃fetch useState useEffect？

在深入研究解决方案之前，让我们回顾一下传统方法的局限性：

1. 冗余：每次数据获取都涉及加载状态、错误处理和获取调用本身的重复代码。
2. 缓存效率低下： fetch本身并不缓存数据。导航回页面意味着重新获取所有内容。
3. 手动重新获取：数据更新需要手动干预才能触发重新加载。

让我们解决这些问题。

---

第 1 步：安装 Axios 和 React-TanStack-Query

将这些包添加到您的项目中：

<code class="language-bash">npm install axios @tanstack/react-query</code>

接下来，配置一个查询客户端，一个用于管理数据的助手：

<code class="language-javascript">// /components/providers/QueryProvider.jsx
"use client"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function QueryProvider({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}</code>

<code class="language-javascript">// /layout.jsx
import localFont from "next/font/local";
import "./globals.css";
import QueryProvider from "../components/providers/QueryProvider";

const geistSans = localFont({
    src: "./fonts/GeistVF.woff",
    variable: "--font-geist-sans",
    weight: "100 900",
});
const geistMono = localFont({
    src: "./fonts/GeistMonoVF.woff",
    variable: "--font-geist-mono",
    weight: "100 900",
});

export const metadata = {
    title: "Tanstack Query with axios",
    description: "Generated by create next app",
};


export default function RootLayout({ children }) {
    return (
        <QueryProvider>{children}</QueryProvider>
    );
}</code>

这就是设置。让我们获取一些数据！

---

使用 React-TanStack-Query 获取数据

让我们使用 React-TanStack-Query 重构一个简单的获取示例。 我们将构建一个电影应用程序来获取电影列表：

传统方法 (fetch useState useEffect)

<code class="language-javascript">import { useEffect, useState } from "react";

export default function Movies() {
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/movies")
      .then(res => res.json())
      .then(data => {
        setMovies(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading movies...</p>;
  if (error) return <p>Error loading movies: {error.message}</p>;

  return (
    <ul>
      {movies.map(movie => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}</code>

现在，让我们使用 React-TanStack-Query 来简化这个过程。

改进的方法（React-TanStack-Query）

<code class="language-javascript">import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const fetchMovies = async () => {
  const response = await axios.get("https://api.example.com/movies");
  return response.data;
};

export default function Movies() {
  const { data: movies, error, isLoading } = useQuery(["movies"], fetchMovies);

  if (isLoading) return <p>Loading movies...</p>;
  if (error) return <p>Error loading movies: {error.message}</p>;

  return (
    <ul>
      {movies.map(movie => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}</code>

---

说明

1. useQuery: 此钩子处理获取、缓存和错误管理 - 不再需要手动 useState 或 useEffect！
2. 自动重新获取：数据保持最新状态，无需手动干预。
3. Axios 集成： 与原生 fetch API 相比，Axios 简化了数据获取。

---

自定义 Axios

现实世界的应用程序通常需要标头、基本 URL 或身份验证令牌。 创建可重用的 Axios 实例：

<code class="language-javascript">// utils/axios.js
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://api.example.com",
  headers: {
    Authorization: `Bearer ${process.env.API_TOKEN}`,
  },
});

export default axiosInstance;</code>

在查询中使用此实例：

<code class="language-javascript">import { useQuery } from "@tanstack/react-query";
import axiosInstance from "../utils/axios";

const fetchMovies = async () => {
  const response = await axiosInstance.get("/movies");
  return response.data;
};

// ... rest of the Movies component remains the same</code>

---

React-TanStack-Query 的好处

这就是为什么它值得升级：

1. 内置缓存：数据被缓存，避免不必要的重新获取。
2. 简化的错误处理：不再需要复杂的try/catch块。
3. Stale-While-Revalidate： 在后台获取更新时显示缓存数据。
4. 广泛的自定义：轻松调整获取、轮询、重试等。

---

奖励：分页示例

处理分页 API 非常简单：

<code class="language-bash">npm install axios @tanstack/react-query</code>

---

结论

采用 React-TanStack-Query 就像升级到高性能系统一样。 它处理缓存、错误处理和重新获取，使您能够专注于构建卓越的功能。 如果您厌倦了重复的代码，请尝试一下。你不会后悔的！

以上是使用 Axios 和 React-TanStack-Query 在 Next.js 中获取数据的完整指南的详细内容。更多信息请关注PHP中文网其他相关文章！