React 中从 API 获取数据的方法

这篇博文是关于如何在 React 中从 API 获取数据。
阅读本文之前，你应该熟悉React库和应用程序编程接口 (API)。

React库是构建丰富且高度可扩展的用户界面的绝佳工具。它的强大功能之一是能够从外部获取 Web 应用程序的数据并进行交互。

为什么要获取数据？

当你刚开始使用React开发 Web 应用时，一开始可能不需要任何外部数据。你可以构建一个简单的应用，例如 ToDo 应用或 Counter，然后将数据添加到应用的状态对象中。这完全没问题。

然而，有时你会想从自己的 API 或第三方 API 请求真实世界的数据。例如，如果你想构建一个书店或天气应用，那么使用互联网上一些免费的数据源会更快捷、更方便。

在哪里获取数据

既然我们已经决定要从外部源获取数据，那么问题来了——我们应该在应用程序的哪个位置执行此操作？

这个问题取决于以下标准：

谁对数据感兴趣？
如果数据待处理，谁将显示加载指示器？
当请求失败时在哪里显示可选的错误消息？

通常，这是组件树中一个通用的父组件，它将执行此工作。它将获取数据，将其存储到其本地状态，并将其分发给子组件：

1. 组件首次挂载时：
当我们希望在应用程序首次启动时即可访问数据时，我们会使用这种方式。这意味着，我们需要在父组件挂载时执行数据获取。

在基于类的组件中，数据获取的最佳位置是componentDidMount()生命周期方法。

在功能组件中，它useEffect()与一个空的依赖数组挂钩，因为我们需要获取一次数据。

2. 事件触发时，
我们可以通过创建一个函数来获取触发事件（例如按钮单击）时的数据，该函数将获取数据，然后将该函数绑定到事件。

获取数据的方式

在 React 中有很多方法可以从 API 中提取数据：

使用 Fetch API
使用 Axios 库
使用 async-await 语法
使用自定义钩子
使用 React Query 库
使用 GraphQL API

我们现在将详细探讨这些方法。

1. 使用 Fetch API 获取数据

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

在我们的 CRA 中，我们可以使用fetch()方法来获取数据。此方法仅接受指向数据的 URL。

为此，我们将创建一个名为的方法fetchData()。它将fetch()使用提供的 URL 调用方法，然后将结果转换为 JSON 对象并将其打印到控制台：

const fetchData = () => {
return fetch("https://randomuser.me/api/")
      .then((response) => response.json())
      .then((data) => console.log(data));}

现在我们可以在应用程序的任何地方使用此方法。以下是如何在钩子中使用它的示例useEffect()：

import {useEffect} from "react";

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

2. 使用 Axios 库获取数据

它与 Fetch 执行相同的工作，但主要区别在于它已经将结果作为 JSON 对象返回，因此我们不需要转换它。

首先我们需要使用npm安装它：

npm install axios

然后我们需要将它导入到我们的项目中，然后我们可以在相同的函数fetchData()而不是fetch()方法中使用它：

import axios from "axios"

const fetchData = () => {
return axios.get("https://randomuser.me/api/")
      .then((response) => console.log(response.data));}

使用 Axios 的方便之处在于它具有更短的语法，可以让我们减少代码，并且它包含许多 Fetch 在其 API 中没有的工具和功能。

3.使用 Async-Await 语法获取数据

在 ES7 中，可以使用async-await语法来解析 Promise。如果您不熟悉此功能，请点击此处。

这样做的好处是，它使我们能够删除 .then() 回调并简单地取回异步解析的数据。

让我们使用以下语法重写我们的fetchData()函数：

async function fetchData() {
    try {
      const result = await axios.get("https://randomuser.me/api/")
      console.log(result.data));
    } catch (error) {
      console.error(error);
    }
  }

4.使用自定义钩子获取数据

我们可以使用 React-Fetch-Hook 库从 API 中提取数据。它已经包含了几个我们可以使用的属性：data用于error错误处理和isLoading加载问题。

首先应该安装：

npm install react-fetch-hook

然后应该将其导入并在公共父组件之上使用：

import useFetch from "react-fetch-hook"

const {data} = useFetch("https://randomuser.me/api/");
console.log(data);

还有其他数据获取方式，如 React Query 库和 GraphQL API，但这篇博文不会深入介绍它们，但您可以自由探索它们 :)
祝您获取愉快！！！

感谢您阅读我的博客。欢迎在LinkedIn或Twitter上与我联系:)

文章来源：https://dev.to/olenadrugalya/ways-of-getting-data-from-api-in-react-2kpf