如何在 React 中管理 API 调用⚛️

React 库以构建丰富且高度可扩展的用户界面而闻名。在 React 中，有很多方法可以从外部 API获取数据。

在阅读本博客之前，请熟悉React 库和应用程序编程接口 (API)。

在本博客中，我们将讨论在 React 中管理 API 调用的不同方法。最终，您将能够根据应用程序需求选择最佳方法。

1. Fetch API

Fetch API内置于大多数现代浏览器的窗口对象（window.fetch）中，使我们能够非常轻松地发出 HTTP 请求。

以下代码片段展示了实际使用 Fetch API 的一个简单示例。



import {useEffect} from "react";

const fetchUsers = () => {
// Where we're fetching data from
return fetch("http://www.abc.cd/test")
// We get the API response and receive data in JSON format
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch ((error) => console.error(error));}

此函数的唯一目标是访问数据并使用该response.json()方法将响应转换为 JSON。
此处，该方法的用途json()是获取存储在数据中的响应对象，并用于更新应用程序中的用户状态。

Fetch 是基于 Promise 的，这意味着我们也可以使用.catch()它来捕获错误。遇到的任何错误都会被用作值来更新错误状态。

除此之外，我们在useEffect()钩子中发出此请求，并使用一个空的依赖项数组作为第二个参数，这样我们的请求只会发出一次，并且不依赖于任何其他数据。以下是如何在钩子
中使用它的示例：useEffect()



import {useEffect} from "react";

useEffect(() => {
    fetchData()
  }, []);

这不是很方便吗？让我们看看其他方法有什么用处😃。

2. Axios 库

Axios是一个基于 Promise 的 JavaScript HTTP 客户端，可用于前端应用程序和Node.js 后端。
通过使用 Axios，可以轻松地向 REST 端点发送异步 HTTP 请求并执行CRUD操作。

在这个例子中，我们必须首先使用npm 或 yarn安装 Axios ，然后将其作为导入添加到您的父组件中。



npm install axios

以下代码片段展示了使用 Axios 的示例：



import axios from "axios"

const fetchData = () => {
return axios.get("http://www.abc.cd/test")
   .then((response) => console.log(response.data));
}

与Fetch API类似，Axios也返回一个Promise。但在 Axios 中，它始终返回 JSON 响应。编码部分与 Fetch API 类似，但步骤更短，错误处理更好。

查看官方文档以获取更多知识。

3. Async-Await 语法

Async/await是一种同步编写异步代码的相对较新的方法。

函数前的async关键字有两个作用：

让它始终返回承诺。
允许在其中使用 await。

Promise 之前的await关键字使 JavaScript 等待直到该 Promise 完成，然后：

如果发生错误，则会生成异常。
否则，返回结果。

以下是代码片段：



async function fetchData() {
    try {
      const result = await axios.get("http://www.abc.cd/test")
      console.log(result.data));
    } catch (error) {
      console.error(error);
    }
  }

当我们使用时useEffect()，效果函数（第一个参数）不能设置为异步函数。为此，我们可以在组件中创建一个单独的异步函数，然后在 useEffect 中同步调用该函数并相应地获取数据。

4. 自定义 React Hook

自定义 Hook是一个JavaScript 函数，其名称以“use”开头，可以调用其他 Hook。自定义 Hook 的理念是将组件逻辑提取到可复用的函数中。

因此，让我们调用我们的自定义钩子：useFetch。此钩子接受两个参数，即我们需要查询以获取数据的URL和表示我们想要应用于请求的选项的对象。

好了！现在，让我们看看用我们的钩子获取数据有多么简单useEffect()。我们将使用 Fetch API 发出请求。为此，我们必须传递 URL 和想要检索的选项。这样，我们就能得到一个可以用来渲染应用程序的对象。



import { useState, useEffect } from 'react';
const useFetch = (url = 'http://www.abc.cd/test', options = null) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url, options)
      .then(res => res.json())
      .then(data => setData(data));
  }, [url, options]);
  return {data}
}
export default useFetch;

无论何时我们需要在应用程序内部获取数据，我们都可以调用它。



import useFetch from './useFetch';
  const { data } = useFetch( 'http://www.abc.cd/test' );
  console.log(data);

5. React 查询库

React-query是一个很棒的库，它解决了管理服务器状态和应用程序中的缓存的问题。

“它使在 React 应用程序中获取、缓存、同步和更新服务器状态变得轻而易举”

首先，让我们安装所需的包



npm install react-query react-query-devtools

注意：React Query 也有自己的开发工具，可以帮助我们直观地了解 React Query 的内部工作原理。

React-query为我们提供了一个缓存，您可以通过下面的 React Query Devtools 查看。这使我们能够根据为每个请求指定的键值轻松管理我们发出的请求。



import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <FetchData />
    </QueryClientProvider>
  );
}

function FetchData() {
  const { data } = useQuery("UserData", () =>
    fetch("http://www.abc.cd/test").then((res) => res.json())
  );

  return (
    <div>
       // data you want to show
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

简而言之，我们只需要告诉库您需要在哪里获取数据，它就会处理缓存、后台更新和刷新数据，而无需任何额外的代码或配置。

它还为变异和查询提供了一些钩子或事件来处理错误和其他副作用状态，从而无需useState()钩子useEffect()并用几行 React Query 逻辑代替它们。

为了获得更好的见解，请查看官方文档。

还有许多其他方法可以管理数据获取，例如SWR、GraphQL API，但这篇博文实际上并没有深入解释它们，但你可以查看一下:)

就这些。顺便说一句，别忘了看看下面这条推文的评论区。这可能会帮助你选择最佳方法。

祝你编码愉快 😉。感谢阅读我的博客 💖。

欢迎随时通过Twitter与我们联系:)

文章来源：https://dev.to/adyasha8105/how-to-manage-api-calls-in-react-11a8