探索 React 的数据检索方法

梦里梦外; 2024-02-27 06:08 12阅读 0赞

在 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