使用 Axios 和 React-TanStack-Query 在 Next.js 中获取数据的完整指南
说实话:您可能熟悉 fetch
API,以及 useState
和 useEffect
。它可以工作,但很快就会变得笨拙。错误处理? 一件苦差事。缓存?一场噩梦。 管理数据更新?忘了它吧!
但是如果数据获取可以更简单怎么办? 输入 Axios 和 React-TanStack-Query,将数据管理从复杂的行为转变为平稳、高效的过程。
考虑一个电影列表应用程序。这些工具可以让您专注于构建功能,而不是重复的代码。准备好升级了吗?让我们开始吧!
为什么要放弃fetch
useState
useEffect
?
在深入研究解决方案之前,让我们回顾一下传统方法的局限性:
- 冗余:每次数据获取都涉及加载状态、错误处理和获取调用本身的重复代码。
-
缓存效率低下:
fetch
本身并不缓存数据。导航回页面意味着重新获取所有内容。 - 手动重新获取:数据更新需要手动干预才能触发重新加载。
让我们解决这些问题。
第 1 步:安装 Axios 和 React-TanStack-Query
将这些包添加到您的项目中:
npm install axios @tanstack/react-query
接下来,配置一个查询客户端,一个用于管理数据的助手:
// /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> ); }
// /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> ); }
这就是设置。让我们获取一些数据!
使用 React-TanStack-Query 获取数据
让我们使用 React-TanStack-Query 重构一个简单的获取示例。 我们将构建一个电影应用程序来获取电影列表:
传统方法 (fetch
useState
useEffect
)
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> ); }
现在,让我们使用 React-TanStack-Query 来简化这个过程。
改进的方法(React-TanStack-Query)
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> ); }
说明
useQuery
: 此钩子处理获取、缓存和错误管理 - 不再需要手动useState
或useEffect
!- 自动重新获取:数据保持最新状态,无需手动干预。
- Axios 集成: 与原生
fetch
API 相比,Axios 简化了数据获取。
自定义 Axios
现实世界的应用程序通常需要标头、基本 URL 或身份验证令牌。 创建可重用的 Axios 实例:
// 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;
在查询中使用此实例:
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
React-TanStack-Query 的好处
这就是为什么它值得升级:
- 内置缓存:数据被缓存,避免不必要的重新获取。
- 简化的错误处理:不再需要复杂的
try/catch
块。 - Stale-While-Revalidate: 在后台获取更新时显示缓存数据。
- 广泛的自定义:轻松调整获取、轮询、重试等。
奖励:分页示例
处理分页 API 非常简单:
npm install axios @tanstack/react-query
结论
采用 React-TanStack-Query 就像升级到高性能系统一样。 它处理缓存、错误处理和重新获取,使您能够专注于构建卓越的功能。 如果您厌倦了重复的代码,请尝试一下。你不会后悔的!
以上是使用 Axios 和 React-TanStack-Query 在 Next.js 中获取数据的完整指南的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

zustand异步操作中的数据更新问题在使用zustand状态管理库时,经常会遇到异步操作导致数据更新不及时的问题。�...
