在 Web 开发领域,从互联网获取数据就像动态(交互式)应用程序的心跳。在流行的 Web 开发工具 React 中,有很多方法可以做到这一点。每种方式都有自己的优势和需要考虑的事项。
从基本的 fetch() 方法(就像每个人都知道的工具),到更新、更简洁的 async/await 方式、超强大的 Axios 工具、您可以自己构建的自定义钩子以及一体化的 React Query工具,我们将探索它们。
好吧,让我们来探索一下……
1. 获取方法
描述:该fetch()方法是一个内置的 JavaScript 函数,用于发起网络请求并从服务器检索数据。它是在 Web 应用程序(包括 React)中发出 HTTP 请求的基本机制。该fetch()函数用途广泛,可用于发送各种类型的 HTTP 请求,包括GET、POST、PUT、DELETE等。
使用示例:在 React 组件中,该fetch()方法可用于从远程服务器请求数据。它异步操作,返回一个 Promise,该 Promise 解析为表示对请求的响应的 Response 对象。开发人员通常使用.then()Promise 上的方法来处理响应数据,并且可以通过.json()解析 JSON 数据等方法对其进行进一步处理。
import React, {
useEffect } from 'react';
function App() {
useEffect(() => {
fetch('https://site.com/api/data')
.then(response => response.json())
.then(data => console.log(data))
}, []);
return (
<div> Different ways to fetch Data </div>
);
}
export default App;
优点:
原生于 JavaScript,因此不需要额外的库或依赖项。
现代浏览器广泛支持。
可以处理各种类型的HTTP请求。
提供对请求标头和选项的细粒度控制。
**注意事项:
处理错误和超时可能需要额外的代码。
用于处理响应的代码可能会变得冗长,尤其是对于复杂的场景。
它不提供数据缓存或自动重试的内置功能。
2. 异步等待
描述: Async/await 是一项现代 JavaScript 功能,可简化异步代码的处理。它允许您以更像同步的风格编写异步代码,使其更易于理解和管理。异步函数隐式返回 Promise,并且可以与任何异步操作一起使用,包括数据获取。
使用示例:在 React 组件中,您可以定义一个异步函数来从远程 API 获取数据。通过使用await关键字,您可以等待数据获取后再继续。这提高了代码的可读性和错误处理能力,使其成为 React 中数据获取的宝贵选择。
import React, {
useEffect } from 'react';
async function fetchData() {
try {
const response = await fetch('https://site.com/api/data');
const data = await response.json();
console.log(data);
} catch