数据获取是 react 应用程序的基础，支持加载用户数据、动态渲染内容等功能。 react 提供了一个灵活的数据处理生态系统，可以根据应用程序的复杂性和性能需求选择各种库和方法。在本文中，我们将探讨 react 中数据获取的几个关键方法，包括 fetch api、axios、async/awt、react query、swr 和 graphql。
1. 使用 fetch api 获取数据
fetch api 是一个内置的 web api，它使网络请求更加简单，并受到现代浏览器的广泛支持。它返回一个 promise，该 promise 使用表示 api 请求中的数据的 response 对象进行解析。
例子
import react, { useeffect, usestate } from 'react';
const fetchexample = () => {
const [data, setdata] = usestate([]);
const [loading, setloading] = usestate(true);
const [error, seterror] = usestate(null);
useeffect(() => {
const fetchdata = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
if (!response.ok) throw new error('network response was not ok');
const data = await response.json();
setdata(data);
} catch (error) {
seterror(error.message);
} finally {
setloading(false);
}
};
fetchdata();
}, []);
return (
<div>
{loading ? <p>loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
{error && <p>error: {error}</p>}
</div>
);
};
登录后复制
何时使用 fetch api
- 小型项目或具有基本数据获取需求的项目。
- 与基于浏览器的应用程序的最小依赖性和兼容性。
2. 使用axios获取数据
axios 是一个适用于浏览器和 node.js 的基于 promise 的 http 客户端，它提供比 fetch api 更多的功能，例如请求和响应拦截器以及转换请求和响应的能力。
例子
import react, { useeffect, usestate } from 'react';
import axios from 'axios';
const axiosexample = () => {
const [data, setdata] = usestate([]);
const [loading, setloading] = usestate(true);
const [error, seterror] = usestate(null);
useeffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
setdata(response.data);
setloading(false);
})
.catch((error) => {
seterror(error.message);
setloading(false);
});
}, []);
return (
<div>
{loading ? <p>loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
{error && <p>error: {error}</p>}
</div>
);
};
登录后复制
axios 的好处
- 支持可能不完全支持 fetch api 的旧版浏览器。
- 通过拒绝 http 错误代码提供更好的错误处理。
- 允许简单的请求和响应转换，使其在更大、更复杂的应用程序中流行。
3. 使用 async/await 语法以获得更好的可读性
使用 async 和await，在 javascript 中处理异步代码变得更加清晰。 fetch api 和 axios 都可以使用 async/await 语法，让代码更容易阅读。
获取示例
const fetchdata = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setdata(data);
} catch (error) {
console.error('error fetching data:', error);
}
};
登录后复制
异步/等待的好处
- 提高了可读性，并且比承诺链更容易处理。
- 允许我们使用 try/catch 块进行错误处理。
4. react query：强大的数据获取和缓存库
react query 处理服务器状态的缓存、同步和更新，使您能够轻松获取、更新和缓存数据。 react query 的自动数据缓存和重新获取使其成为复杂应用程序的流行选择。
例子
import react from 'react';
import { usequery } from 'react-query';
import axios from 'axios';
const fetchposts = async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
return response.data;
};
const reactqueryexample = () => {
const { data, isloading, error } = usequery('posts', fetchposts);
if (isloading) return <p>loading...</p>;
if (error) return <p>error: {error.message}</p>;
return (
<div>
{data.map((item) => (
<p key={item.id}>{item.title}</p>
))}
</div>
);
};
登录后复制
react 查询的好处
- 数据缓存和后台刷新。
- 与 api 集成良好，并处理网络故障的重试逻辑。
- 减少管理加载、错误和重新获取状态的代码。
5. vercel 的 swr（stale-while-revalidate）
swr 是另一个数据获取库，它优先考虑缓存和重新验证策略。 swr 由 vercel 开发，每当用户重新访问页面时，它都会在后台自动重新获取数据，从而保持数据最新。
例子
import react from 'react';
import useswr from 'swr';
import axios from 'axios';
const fetcher = (url) => axios.get(url).then((res) => res.data);
const swrexample = () => {
const { data, error } = useswr('https://jsonplaceholder.typicode.com/posts', fetcher);
if (!data) return <p>loading...</p>;
if (error) return <p>error: {error.message}</p>;
return (
<div>
{data.map((item) => (
<p key={item.id}>{item.title}</p>
))}
</div>
);
};
登录后复制
驻波比的好处
- 使用缓存优先的数据获取和自动后台重新验证。
- 与流行的后端框架和 restful api 集成。
- 非常适合需要用最少的代码保持数据最新的应用程序。
6. 使用 graphql 获取数据
graphql 是一种 api 查询语言，可以更好地控制返回的数据。它允许您仅获取所需的字段，这可以通过减少过度获取或获取不足来提高性能。
apollo 客户端示例
要开始使用 apollo client，请通过运行 npm install @apollo/client graphql 来安装它。
import React from 'react';
import { useQuery, gql } from '@apollo/client';
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
}
}
`;
const GraphQLExample = () => {
const { loading, error, data } = useQuery(GET_POSTS);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
{data.posts.map((post) => (
<p key={post.id}>{post.title}</p>
))}
</div>
);
};
登录后复制
graphql 的好处
- 通过控制检索的字段实现更高效的数据获取。
- 减少网络负载，特别有利于复杂或嵌套数据。
- 与 apollo client 等库良好集成，改善开发者体验。
结论
在 react 中选择正确的数据获取方法取决于您项目的复杂性、性能需求以及您对库和工具的偏好。这是一个快速总结：
- fetch api：适合小型项目；内置且最小。
- axios：更高级的 http 客户端，具有更好的错误处理能力。
- async/await：提高异步代码的可读性和可管理性。
- react query：非常适合缓存、后台重新获取和服务器状态管理。
- swr：重新验证时过时策略，非常适合获取新数据。
- graphql with apollo：最适合需要特定字段的复杂数据需求。
以上就是React 中的数据获取的详细内容，更多请关注米云其它相关文章！
