使用React和Axios调用API简介

本教程将教您如何使用 Ax ios 获取数据，然后如何操作它并最终通过过滤功能将其显示在您的页面上。在此过程中，您将学习如何使用地图、过滤器和包含方法。最重要的是，您将创建一个简单的加载程序来处理从 api 端点获取的数据的加载状态。

1.设置项目

create-react-app让我们在终端中使用命令设置一个 React 项目：

npx create-react-app project-name

然后，通过终端窗口打开项目目录，输入npm install axios本地安装项目的axios。

2.选择目标 API

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

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

import axios from 'axios'

Random User Generator API 提供了一系列用于创建各种类型数据的选项。您可以查看文档以获取更多信息，但对于本教程，我们将保持简单。

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

以下是我们将调用的 API URL：

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

请注意，我没有使用idAPI 中提供的选项，因为它有时会null为某些用户返回。因此，为了确保每个用户都有唯一的价值，我registered在 API 中包含了该选项。

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

现在，接下来就是通过 Axios 进行 API 调用。

3.创建应用程序状态

首先，让我们使用useStateReact 中的钩子创建状态，以便我们可以存储获取的数据。

在我们的App组件中，从 React 导入useState钩子，然后创建如下所示的状态。

import React, { useState } from "react";
import axios from "axios";

const App = () => {
  const [users, setUsers] = useState([]);
  const [store, setStore] = useState([]);

  return (
    <div>
     
    </div>
  );
};

export default App;

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

4.使用 Axios 获取数据

接下来我们需要做的是创建一个getUsers函数来处理数据的获取。在这个函数中，我们使用axios该方法从 API 中获取我们的数据get。

现在，为了在页面加载时显示我们获取的数据，我们将导入一个调用的 React 钩子useEffect并调用其中的getUsers函数。

该useEffect钩子主要管理功能组件中的副作用，它类似于componentDidMount()React 基于类的组件中使用的生命周期钩子。这个钩子接受一个空数组作为第二个参数，用于清理副作用。

如下所示更新组件中的代码，App以便我们可以在控制台中检查我们的响应数据。

import React, { useState, useEffect } from "react";

const App = () => {
  const [users, setUsers] = useState([]);
  const [store, setStore] = useState([]);
  
  const getUsers = () => {
    axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
      .then(response => console.log(response))
  };
  
  useEffect(() => {
    getUsers();
  }, []);

  return (
    <div>
     
    </div>
  );
};

export default App;

当您检查控制台时，您将看到一个对象输出。如果你打开这个对象，它里面还有一个名为 的对象data，而在 data 里面，有一个名为 的数组results。

如果我们想从结果中返回一个特定的值，我们可以axios.get按如下方式更新调用：

    axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
      .then(response => console.log(response.data.results[0].name.first))

在这里，我们记录了结果数组中第一个值的名称。

5.处理结果数据

现在让我们使用 javascript 的内置map方法来遍历数组中的每个元素，并创建一个具有新结构的 JavaScript 对象的新数组。

getUsers使用以下代码更新您的函数：

const getUsers = () => {
    axios
      .get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
      .then((response) => {
        const newData = response.data.results.map((result) => ({
          name: `${result.name.first} ${result.name.last}`,
          id: result.registered
        }));
        setUsers(newData);
        setStore(newData);
      })
      .catch((error) => {
        console.log(error);
      });
  };

在上面的代码中，我们创建了一个名为newData. 它存储response.data.results使用该方法查看数组的结果map。在map 回调中，我们将数组的每个元素引用为result（注意单数/复数差异）。此外，通过使用数组中每个对象的键值对，我们创建了另一个具有name键值id对的对象。

通常，如果您在浏览器中查看 API 调用的结果，您会看到对象内部有first 和last 键值对name ，但没有完整名称的键值对。因此，从上面的代码中，我们能够结合first 和last名称在一个新的 javaScript 对象中创建一个全名。请注意，JSON 和 JavaScript 对象是不同的东西，尽管它们的工作方式基本相同。

然后我们将新的中间数据设置为setUsers和setStore状态。

6.使用过滤填充数据存储

过滤的想法很简单。我们有我们的store状态，它始终保持原始数据不变。然后，通过filter在这个状态上使用函数，我们只得到匹配的元素，然后将它们分配给users状态。

const filteredData = store.filter((item) => (
    item.name.toLowerCase().includes(event.target.value.toLowerCase()))

该filter方法需要一个函数作为参数，为数组中的每个元素运行一个函数。这里我们将数组中的每个元素称为item. 然后我们获取name每个密钥item并将其转换为小写，以使我们的过滤功能不区分大小写。

在我们得到 的name键之后item，我们检查它是否包含 我们输入的搜索字符串。includes这是另一种内置的 JavaScript 方法。我们将输入字段中键入的搜索字符串作为参数传递给includes，如果该字符串包含在调用它的变量中，它会返回。同样，我们将输入字符串转换为小写，这样无论您输入大写还是小写输入都无关紧要。

最后，该filter方法返回匹配的元素。所以我们简单地把这些元素存储在setUsers状态中。

App使用我们创建的函数的最终版本更新组件。

 const filterNames = (event) => {
    const filteredData = store.filter((item) =>
      item.name.toLowerCase().includes(event.target.value.toLowerCase())
    );
    setUsers(filteredData);
  };

7.创建组件

尽管对于这个小例子，我们可以将所有内容都放在App组件中，但让我们利用 React 并制作一些小的功能组件。

让我们向应用程序添加几个组件。首先，我们从单独的 JavaScript 文件中导入组件（我们将很快定义这些文件）：

import Lists from "./components/Lists";
import SearchBar from "./components/SearchBar";

接下来，我们更新 App 组件的return声明以使用这些组件：

  return (
    <div className="Card">
        <div className="header">NAME LIST</div>
        <SearchBar searchFunction={filterNames} />
        <Lists usernames={users} />
    </div>
  );

目前，我们将只关注功能。稍后，我将提供我创建的css文件。

请注意，我们有组件的 prop 和组件searchFunction的prop 。SearchBarusernamesLists

另请注意，我们使用users状态而不是store状态来显示数据，因为users状态是包含过滤结果的状态。

SearchBar组件_

这个组件非常简单。它只将该filterNames函数作为一个道具，并在输入字段发生变化时调用该函数。将以下代码放入components/SearchBar.js：

import React from 'react';

const SearchBar = ({ searchFunction}) => {
  return (
    <div>
        <input className="searchBar" type='search' onChange={searchFunction} />
    </div>
  )
};

export default SearchBar;

列表组件

该组件将简单地列出用户的姓名。这在components/List.js 中：

import React from 'react';

const Lists = ({ usernames }) => {
  return (
      <div>
          <ul>
              {usernames.map(username => (
                  <li key={username.id}>{username.name}</li>
              ))}
          </ul>
      </div>
  )
};

export default Lists;

在这里，我们再次使用该map方法获取数组中的每个项目并从中创建一个<li>项目。请注意，当您使用map创建项目列表时，您需要使用 akey以便 React 跟踪每个列表项。

8.跟踪加载状态

让我们使用钩子创建一个加载状态，useState以显示何时尚未获取数据。

const [loading, setLoading] = useState(false);

接下来，我们将更新数据获取方法中的加载状态。

  const getUsers = () => {
    axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
      .then((response) => {
        const newData = response.data.results.map((result) => ({
          name: `${result.name.first} ${result.name.first}`,
          id: result.registered,
        }));
        setLoading(true);
        setUsers(newData);
        setStore(newData);
      })
      .catch((error) => {
        console.log(error);
      });
  };

在这里，我们创建了一个loading状态并最初将其设置为 false。然后我们在获取带有该状态的数据时将此状态设置为 true setLoading。

最后，我们将更新我们的 return 语句以呈现加载状态。

   return (
    <>
      {loading ? (
        <div className="Card">
          <div className="header">NAME LIST</div>
          <SearchBar searchFunction={filterNames} />
          <Lists users={users} />
        </div>
      ) : (
        <div className="loader"></div>
      )}
    </>
  );

使用 JavaScript 三元运算符，我们在加载状态为 false 时有条件地渲染SearchBar和Lists组件，然后在加载状态为 true 时渲染加载器。另外，我们创建了一个简单的加载器来在界面中显示加载状态。

9.为样式添加一些 CSS

您可以在下面找到特定于此示例的 CSS 文件。

body,
html {
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  justify-content: center;  font-size: 1rem/16;
  margin-top: 50px;
}

li,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  margin-top: 10px;
}

li {
  font-size: 0.8rem;
  margin-bottom: 8px;
  text-align: center;
  color: #959595;
}

li:last-of-type {
  margin-bottom: 50px;
}

.Card {
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 5px 3px 0 #ebebeb;
}

.header {  position: relative;
  font-size: 20px;
  margin: 12px 0;
  color: #575757;
}

.header::after {
  content: "";
  position: absolute;
  left: -50%;
  bottom: -10px;
  width: 200%;
  height: 1px;
  background-color: #f1f1f1;
}

.searchBar {
  text-align: center;
  margin: 5px 0;
  border: 1px solid #c4c4c4;
  height: 20px;
  color: #575757;
  border-radius: 3px;
}

.searchBar:focus {
  outline-width: 0;
}

.searchBar::placeholder {
  color: #dadada;
}

.loader {
  border: 15px solid #ccc;
  border-top: 15px solid #add8e6; 
  border-bottom: 15px solid #add8e6;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

结论

在本教程中，我们使用了Random User Generator API作为随机数据的来源。然后我们从 API 端点获取数据，并使用该map方法在新的 JavaScript 对象中重新构建结果。