探索 React 的数据检索方法

在 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