后端开发教程 - Java、Spring Boot 实战 - msg200.com
在 React.js 中获取 API 数据的 5 种方法
本文是一份参考指南，可帮助您增强作为 React 开发人员的技能以及应对求职面试的技能。
介绍：
React 是用于构建用户界面或 UI 组件的 JavaScript 库之一。许多 React 项目需要与外界数据交互。例如，当我们想要创建一个天气应用时，我们需要动态变化的精确数据。我们可以通过获取 API 来访问这些数据。在本文中，我们将探讨在 React.js 中获取数据的不同方法。
获取数据的方式
1. 使用 Fetch API 在 React 中获取数据
Fetch API 在现代浏览器 (window.fetch) 中可用，它允许我们使用 JavaScript 的 Promise 发出请求。我们可以使用 fetch() 方法获取数据。要使用 fetch 发出简单的 GET 请求，我们只需包含要发送请求的 URL 端点即可。以下是如何使用它的一个示例。
useEffect(() => {
fetch("https://randomuser.me/api/")
.then((response) => response.json())
.then((data) => console.log(data));
}, []);
第一个.then用于返回结果的 JSON 对象，第二个用于在控制台打印。
2. 使用 Axios 在 React 中获取数据
这用于通过axios向 React 发出请求。它与 Fetch 类似，但是，在这种方法中，我们不需要将数据转换为JSON，而是使用第一个.then，axios 直接获取数据并返回 JSON 对象。Axios的语法更简洁，可以减少代码量，并且它包含许多 Fetch API 所不具备的工具和功能。以下是axios 的
使用方法。
- 首先安装axios
$ npm install axios
or
$ yarn add axios
- 将其导入到你的项目中
import axios from "axios"
- 语法如下
useEffect(() => {
axios.get("https://randomuser.me/api/")
.then((response) => console.log(response.data));
}, []);
3. 使用 async / await 语法在 React 中获取数据
Async / await使我们能够移除 .then() 回调，并直接获取异步解析的数据。记住，我们不能在 useEffect 内部创建异步函数。
useEffect(() => {
getData()
}, []);
async function getData() {
const response = await fetch('/movies');
const result = await response.json();
console.log(result.data));
}
4. 使用自定义钩子获取数据
代码简洁、语法精简总是好的，你可能会发现反复使用 useEffect 非常繁琐，有时甚至会让很多开发者感到困惑。这里我们提供了一种更清晰的数据获取方式。使用第三个库**react-fetch-hook**可以让我们快速获取数据，并减少重复使用的代码。
- 首先，我们需要安装 * react-fetch-hook*
$ npm install react-fetch-hook
or
$ yarn add react-fetch-hook
JavaScript
- 将其导入到你的项目中
import useFetch from "react-fetch-hook"
- 以下是我们如何使用它
const {data} = useFetch("https://randomuser.me/api/");
console.log(data);
5. 使用 React 查询库获取 React 中的数据
你可能会认为使用自定义钩子是个好方法，没错！然而，React Query 将使用钩子进行数据获取提升到了一个新的高度。React Query 不仅提供了简单清晰的语法，还提供了状态管理工具来控制数据获取的时间、方式和频率。
- 首先，安装React 查询
$ npm i react-query
or
$ yarn add react-query
- 将其导入到你的项目中
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
- 以下是我们如何使用它
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
function Example() {
const { isLoading, error, data } = useQuery('nameForYourData', () =>
fetch('https://api.github.com/repos/tannerlinsley/react-query')
.then(response =>
response.json()
)
)
if (isLoading) return 'Loading...'
if (error) return 'An error has occurred: ' + error.message
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
<p>{data.subscribers_count}</p>
</div>
)
}
这就是获取数据的全部内容！🎉🎉
感谢您阅读我的文章，希望您发现这篇文章很有用。
欢迎随时通过Twitter与我们联系:)