本站资源收集于互联网,不提供软件存储服务,每天免费更新优质的软件以及学习资源!

React中的数据获取

网络教程 app 1℃

React中的数据获取

数据获取是 react 应用程序的基础,支持加载用户数据、动态渲染内容等功能。 react 提供了一个灵活的数据处理生态系统,可以根据应用程序的复杂性和性能需求选择各种库和方法。在本文中,我们将探讨 react 中数据获取的几个关键方法,包括 fetch api、axios、async/await、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(‘jsonplaceholder.typicode./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小型项目或具有基本数据获取需求的项目。与基于浏览器的应用程序的最小依赖性和兼容性。 . 使用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(‘jsonplaceholder.typicode./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(‘jsonplaceholder.typicode./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(‘jsonplaceholder.typicode./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(‘jsonplaceholder.typicode./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 {idtitle } }`;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 中的数据获取的详细内容,更多请关注范的资源库其它相关文章!

转载请注明:范的资源库 » React中的数据获取

喜欢 (0)