React und Axios: Ein Leitfaden für Anfänger zu API-Aufrufen

In diesem Tutorial erfahren Sie, wie Sie mit Axios Daten abrufen, diese dann manipulieren und sie schließlich durch Filtern auf Ihrer Seite anzeigen. Unterwegs erfahren Sie, wie Sie Zuordnungen, Filter und Einbindungsmethoden verwenden. Am wichtigsten ist, dass Sie einen einfachen Loader erstellen, um den Ladestatus der vom API-Endpunkt erhaltenen Daten zu verwalten.

1. Setup-Projekt

Lassen Sie uns ein React-Projekt mit dem Befehl create-react-app im Terminal einrichten:

npx create-react-app project-name

Öffnen Sie dann das Projektverzeichnis über ein Terminalfenster und geben Sie npm install axios ein, um Axios lokal für das Projekt zu installieren.

2.Ziel-API auswählen

Wir werden die Random User Generator API verwenden, um zufällige Benutzerinformationen zur Verwendung in unserer Anwendung zu erhalten.

Fügen wir das Axios-Modul zu unserer Anwendung hinzu, indem wir es in unsere App.js-Datei importieren.

import axios from 'axios'

Die Random User Generator API bietet eine Reihe von Optionen zum Erstellen verschiedener Datentypen. Weitere Informationen finden Sie in der Dokumentation. In diesem Tutorial halten wir es jedoch einfach.

Wir möchten zehn verschiedene Benutzer haben. Wir benötigen lediglich den Vornamen, den Nachnamen und die eindeutige ID, die React beim Erstellen der Liste der Elemente benötigt. Um den Anruf konkreter zu gestalten, nehmen wir außerdem die Option „Nationalität“ als Beispiel.

Hier ist die API-URL, die wir aufrufen werden:

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

Bitte beachten Sie, dass ich nicht die in der API bereitgestellte id 选项，因为它有时会为某些用户返回 null 。因此，为了确保每个用户都有一个唯一的值，我在 API 中包含了 registered-Option verwende.

Sie können dies kopieren und in Ihren Browser einfügen. Die zurückgegebenen Daten werden dann im JSON-Format angezeigt.

Der nächste Schritt besteht nun darin, den API-Aufruf über Axios durchzuführen.

3. Anwendungsstatus erstellen

Erstellen wir zunächst einen Status mithilfe von useState-Hooks in React, damit wir die abgerufenen Daten speichern können.

Importieren Sie in unserer App-Komponente den App 组件中，从 React 导入 useState-Hook aus React und erstellen Sie den Status wie unten gezeigt.

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;

Hier können Sie den users 和 storeStatus sehen. Einer wird zu Filterzwecken verwendet und nicht bearbeitet, und der andere enthält die gefilterten Ergebnisse, die im DOM angezeigt werden.

4.Verwenden Sie Axios, um Daten zu erhalten

Als nächstes müssen wir eine getUsers 函数来处理数据的获取。在此函数中，我们使用 axios 使用 get Methode erstellen, um Daten von der API abzurufen.

Um nun die Daten anzuzeigen, die wir beim Laden der Seite abgerufen haben, importieren wir eine Funktion namens useEffect 的 React hook，并在其中调用 getUsers.

useEffect 钩子基本上管理功能组件中的副作用，它类似于 React 基于类的组件中使用的 componentDidMount() Lifecycle-Hooks. Dieser Hook akzeptiert ein leeres Array als zweiten Parameter zur Bereinigung von Nebeneffekten.

Aktualisieren Sie den Code in der App-Komponente wie unten gezeigt, damit wir die Antwortdaten in der Konsole überprüfen können.

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;

Wenn Sie die Konsole überprüfen, sehen Sie eine Objektausgabe. Wenn Sie dieses Objekt öffnen, befindet sich darin ein weiteres Objekt, ein Array mit dem Namen data，而在 data 里面，有一个名为 results.

Wenn wir einen bestimmten Wert aus dem Ergebnis zurückgeben möchten, können wir den axios.get-Aufruf wie folgt aktualisieren:

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

Hier erfassen wir den Namen des ersten Werts im Ergebnisarray.

5.Ergebnisdaten verarbeiten

Jetzt verwenden wir die integrierte map-Methode von JavaScript, um jedes Element im Array zu durchlaufen und ein neues Array von JavaScript-Objekten mit einer neuen Struktur zu erstellen.

Aktualisieren Sie Ihre getUsers-Funktion mit dem folgenden Code:

  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);
      });
  };

Im obigen Code haben wir eine Variable namens newData erstellt. Es speichert die Ergebnisse der Anzeige des Arrays response.data.results mit der Methode newData 的变量。它存储使用 map 方法查看 response.data.results 数组的结果。在 map 回调中，我们将数组的每个元素引用为 result （注意单数/复数差异）。此外，通过使用数组中每个对象的键值对，我们使用 name 和 id. Im map-Rückruf verweisen wir auf jedes Element des Arrays als Ergebnis (beachten Sie den Unterschied zwischen Singular und Plural). Darüber hinaus erstellen wir durch die Verwendung der Schlüssel-Wert-Paare für jedes Objekt im Array ein weiteres Objekt mit den Schlüssel-Wert-Paaren name und 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。然后，我们获取每个 item 的 name 键并将其转换为小写，以使我们的过滤功能不区分大小写。

获得 item 的 name 键后，我们检查该键是否包含我们输入的搜索字符串。 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";

接下来，我们更新应用程序组件的 return 语句以使用这些组件：

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

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

请注意，我们有 searchFunction 属性用于 SearchBar 组件，以及 usernames 属性用于 Lists 组件.

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

SearchBar 组件

这个组件非常简单。它仅将 filterNames 函数作为 prop，并在输入字段更改时调用该函数。将以下代码放入 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 创建项目列表时，您需要使用 key 以便 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。然后我们在使用 setLoading 状态获取数据时将此状态设置为 true。

最后，我们将更新 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); }
}

结论

在本教程中，我们使用随机用户生成器 API 作为随机数据源。然后，我们从 API 端点获取数据，并使用 map 方法在新的 JavaScript 对象中重构结果。

接下来是使用 filter 和 includes 方法创建过滤函数。最后，我们创建了两个不同的组件，并在尚未获取数据时有条件地以加载状态渲染我们的组件。

在过去的几年里，React 越来越受欢迎。事实上，我们在 Envato Market 中有许多项目可供购买、审查、实施等。如果您正在寻找有关 React 的其他资源，请随时查看它们。

Das obige ist der detaillierte Inhalt vonReact und Axios: Ein Leitfaden für Anfänger zu API-Aufrufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!