So verwenden Sie APIs in React mit Fetch und Axios

Eine API (Application Programming Interface) ist eine Reihe von Protokollen, die es einer Anwendung ermöglichen, Anforderungen an einen Server zu senden und eine Antwort zu erhalten.

Über APIs sind Sie in der Lage, Softwareteile ohne Kleinstarbeit in Ihre Anwendung zu integrieren. Dieser Prozess der Verwendung einer API in Ihrer Anwendung wird im Allgemeinen als Nutzung einer API bezeichnet. Wenn Sie beispielsweise einen bestimmten Ort auf Ihrer Website anzeigen möchten, würden Sie die Google Maps-API verwenden, anstatt die Kartenfunktion von Grund auf neu zu implementieren. APIs reduzieren daher Ihren Arbeitsaufwand und sparen Ihnen Zeit.

Um zu lernen, wie Sie REST-APIs in React mit Fetch und Axios verwenden, erstellen Sie eine einfache React-Anwendung, die zufällige Fakten über Katzen von einer API erhält, wenn Sie auf eine Schaltfläche klicken.

Arten von APIs

APIs können entweder nach Verfügbarkeit oder Anwendungsfall klassifiziert werden. In Bezug auf die Verfügbarkeit können APIs öffentliche, private, Partner- oder zusammengesetzte APIs sein. Wenn sie nach ihrem Zweck klassifiziert werden, können sie sein Datenbank, Remote, Betriebssysteme oder Web-APIs. In diesem Artikel verwenden wir eine Art von Web-API namens REST (Representational State). API.

REST-APIs ermöglichen es Ihnen, Daten von einer Quelle über eine URL abzurufen. In React gibt es mehrere Methoden, die Sie verwenden können, um REST-APIs zu verwenden. Dieser Artikel behandelt die beiden beliebtesten Methoden, nämlich die JavaScript-Fetch-API und den Promise-basierten HTTP-Client Axios.

Verwandt: Was ist die REST-API und wie können Sie Daten für Ihre App oder Website abrufen?

Voraussetzungen

Um dieser Anleitung zu folgen, sollten Sie Folgendes haben:

• Grundlegendes Verständnis von JavaScript.
• Grundkenntnisse von React und React-Hooks.
• NPM lokal auf Ihrem Computer installiert.
• Ein Texteditor oder eine IDE Ihrer Wahl ist installiert.

Erstellen Sie eine React-Anwendung

Zuerst müssen Sie eine React-Anwendung erstellen. Kopieren Sie den folgenden Befehl in Ihr Terminal, um eine React-Entwicklungsumgebung einzurichten.

npx create-react-app catfact

Sobald der Befehl ausgeführt wird, öffnen Sie die Katzenfakt Ordner in Ihrem Texteditor. Sie schreiben Ihren Code in die App.js-Datei in der Quelle Ordner, also fahren Sie fort und entfernen Sie den unnötigen Code.

importiere "./App.css";
Funktion App() {
 Rückkehr (


Drücken Sie die Taste für einen zufälligen Katzenfakt!



Holen Sie sich die Cat-Fakten



 );
}
Standard-App exportieren;

Erstellen Sie als Nächstes eine einfache Benutzeroberfläche, die verwendet wird, um den zufälligen Katzenfakt anzuzeigen.

In app.js

'./App.css' importieren;
Funktion App() {
 Rückkehr (


Drücken Sie die Taste für einen zufälligen Katzenfakt!



Holen Sie sich die Cat-Fakten



 );
}
Standard-App exportieren;

Um Ihre App zu gestalten, fügen Sie den folgenden Code zu der hinzu app.css Datei.

@Import-URL(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital., wght@700;500&display=swap');
.App {
 Schriftfamilie: 'Playfair Display', serif;
 Rand: 20px 15vw;
}
h2 {
 Schriftfamilie: 'Playfair Display', serif;
 Schriftstärke: 700;
 Schriftgröße: 3em;
}
Taste {
 Polsterung: 1em 1.2em;
 Grenze: keine;
 Schriftgröße: 1em;
 Hintergrundfarbe: #131212;
 Farbe: #ffffff;
 Grenzradius: 0,5 m;
 Cursor: Zeiger;
}
Schaltfläche: schweben {
 Hintergrundfarbe:#3b3b3b;
}

Ihre Bewerbung sollte nun so aussehen.

In den nächsten Schritten werden Sie Daten von der API abrufen und in der Anwendung anzeigen.

Verwandt: So erstellen Sie Ihre erste React-App mit JavaScript

Nutzung von REST-APIs mit Fetch

API abrufen ist eine Schnittstelle, mit der Sie Ressourcen von einer API über HTTP-Anforderungen abrufen können. Der bringen() -Methode erhält die URL des Pfads zur Ressource als obligatorisches Argument und gibt ein Promise zurück, das in eine Antwort aufgelöst werden kann.

Die grundlegende Syntax der bringen() Methode ist wie folgt:

fetch('URL zur Ressource')
 .then (Antwort => // Antwort verarbeiten)
 .catch (err => // Fehler behandeln)

Implementieren der Fetch-API

In React wird die Fetch-API genauso verwendet wie in einfachem JavaScript.

bringen(" https://catfact.ninja/fact")
 .then (Antwort => Antwort.json())
 .then (Daten => // Daten verarbeiten)
 .catch (err => // Fehler behandeln)

In der ersten Zeile im obigen Code übergeben Sie die API-URL an die bringen() Methode. bringen() gibt eine HTTP-Antwort zurück, die mithilfe von in JSON konvertiert wird json() Methode. In der dritten Zeile erhalten Sie Zugriff auf die Daten, die Sie dann in der Anwendung verwenden können. Schließlich ermöglicht Ihnen der catch-Block, Fehler elegant zu behandeln.

Um die Abrufanforderung in der App-Komponente zu implementieren, verwenden Sie React-Hooks. Durch die Verwendung der useEffect Hook, Ihre Anwendung wird die Anfrage stellen, sobald die Komponente geladen ist und die useState Hook erstellt und aktualisiert den Status der Komponente. Das Nachverfolgen des Zustands stellt sicher, dass die Komponente erneut gerendert wird, wenn die Abruf-API die Antwort zurückgibt.

Verwandt: Hooks: Der Held der Reaktion

importiere useState und useEffect.
Importiere { useEffect, useState } aus 'react'

Erstellen Sie einen Zustand, um den Katzenfakt und die Funktion zum Aktualisieren aufzunehmen.

const [Fakt, setFakt] = useState('')

Erstellen Sie als Nächstes eine Funktion, um die GET-Anforderung an die API zu senden, und rufen Sie sie in der auf useEffect Haken.

const fetchFact = () => {
bringen(" https://catfact.ninja/fact")
 .then((Antwort) => Antwort.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);

Ihre app.js-Datei sollte nun so aussehen:

importiere "./App.css";
import {useEffect, useState} from "react";
Funktion App() {
 const [Fakt, setFakt] = useState("");
 const fetchFact = () => {
 bringen(" https://catfact.ninja/fact")
 .then((Antwort) => Antwort.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);
Rückkehr (


Drücken Sie die Taste für einen zufälligen Katzenfakt!



Holen Sie sich die Cat-Fakten
{Tatsache}




);
}
Standard-App exportieren;

Sie sollten jetzt eine zufällige Tatsache über Katzen sehen können, die in Ihrem Browser angezeigt wird.

Schreiben Sie als Nächstes Code, um eine zufällige Tatsache anzuzeigen, wenn auf die Schaltfläche geklickt wird.

Ändern Sie die Schaltfläche so, dass sie ein enthält onClick event und seine Handler-Funktion.

 handleClick()}>Cat-Fakt abrufen

Definiere das handleClick() Funktion wie unten gezeigt.

const handleClick = () => {
 fetchFact()
}

Wenn Sie jetzt auf die Schaltfläche klicken, wird die handleClick() Funktion wird aufgerufen Daten abrufen() die die API-Anforderung ausführt und den Zustand mit einer neuen zufälligen Tatsache aktualisiert. Folglich wird die Anwendungs-UI aktualisiert, um die aktuelle Tatsache anzuzeigen.

Nutzung von REST-APIs mit Axios

Anstatt bringen(), mit denen Sie APIs verwenden können Axios. Mögen bringen(), Axios ermöglicht es Ihnen, Anfragen an einen API-Endpunkt zu stellen. Es gibt jedoch einige Unterschiede zwischen den beiden.

• Axios gibt die Antwort automatisch in JSON zurück, während Sie sie bei Verwendung der Fetch-API in JSON konvertieren müssen.
• Axios benötigt im Gegensatz zur Fetch-API nur einen .then()-Callback.
• Axios ist mit den wichtigsten Browsern kompatibel, während Fetch nur in Chrome 42+, Edge 14+, Firefox 39+ und Safari 10+ unterstützt wird

Implementierung von Axios

Installieren Sie Axios, indem Sie den folgenden Befehl ausführen.

npm installiert Axios

Importieren Sie nach Abschluss der Installation das Axios-Paket in Ihre App-Komponente und ändern Sie die fetchFact() Funktion, um es zu verwenden.

Axios aus ‚axios‘ importieren
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (Antwort.Daten.Fakt)
 });
}

Das ist es! Ihre Anwendung sollte einen zufälligen Katzenfakt anzeigen, wenn sie im Browser geladen wird und wenn Sie auf die Schaltfläche klicken.

Mehr Verwendungsmöglichkeiten für APIs mit React

Sie können REST-APIs in React mit verschiedenen Methoden verwenden. In diesem Tutorial haben Sie gelernt, wie Sie Fetch und Axios verwenden, um einen zufälligen Fakt von einer REST-API abzurufen. Die Anwendungsfälle von APIs in realen Anwendungen sind endlos.

Durch Zahlungs-APIs wie Stripe und PayPal können Geschäfte beispielsweise Kundentransaktionen einfach online abwickeln, ohne die Funktionalität selbst implementieren zu müssen. Daher können auch weniger technisch versierte Benutzer nützliche Anwendungen erstellen, die ihren Anforderungen entsprechen.

Was ist API-Authentifizierung und wie funktioniert sie?

Wie beweisen Sie, dass die Person, die auf wichtige Daten zugreifen möchte, diejenige ist, für die sie sich ausgibt? Hier kommt die API-Authentifizierung ins Spiel...

Lesen Sie weiter

Über den Autor