使用React和Axios进行API调用简介

本教程将教您如何使用Axios来获取数据，然后如何处理它并最终通过过滤功能将其显示在页面上。 您将在此过程中学习如何使用地图，过滤器和包含方法。 最重要的是，您将创建一个高阶组件（HOC）来处理从API端点获取的数据的加载状态。

让我们从一个干净的React应用开始。 我假设您使用create-react-app ，文件名将与其输出一致。

在本教程中，我们只需要安装Axios模块。

通过终端窗口转到项目目录，然后键入npm install axios -save以便在本地为项目安装Axios。

获取数据

我们将使用随机用户生成器API来获取要在我们的应用程序中使用的随机用户信息。

通过将Axios模块导入到我们的App.js文件中，将其添加到我们的应用程序中。

import axios from 'axios'

随机用户生成器API提供了许多用于创建各种类型数据的选项。 您可以查看文档以获取更多信息，但是对于本教程，我们将使其保持简单。

我们想获取十个不同的用户，我们只需要名称，姓氏和唯一的ID，这是React在创建元素列表时所必需的。 另外，为使通话更加具体，我们以国籍选项为例。

下面是我们将调用的API。

请注意，由于某些用户有时会返回null ，因此我没有使用API​​中提供的id选项。 因此，为了确保每个用户都有一个唯一的值，我在API中加入了registered选项。

https://randomuser.me/api/?results=10&inc=name,registered&nat=fr

您可以将其复制并粘贴到浏览器中，然后将以JSON格式查看返回的数据。

现在，下一步是通过Axios进行API调用。

首先，让我们创建一个状态，以便我们可以存储获取的数据。

在我们的App组件内，添加一个类构造函数，然后创建状态。

constructor(props){
    super(props)
    this.state = {
      users: [],
      store: []
    }
  }

在这里，您可以看到users和store状态。 一个将用于过滤目的，将不会被编辑，另一个将保留将在DOM中显示的过滤结果。

现在继续创建componentDidMount()生命周期挂钩。

在这个生命周期挂钩中，我们将获取数据，然后通过使用map方法，我们将创建新的中间数据，并将在setState方法中使用该中间数据。

如果在浏览器中检查API调用的结果，您将看到