API's consumeren in React met Fetch en Axios

Een API (Application Programming Interface) is een reeks protocollen waarmee een toepassing verzoeken naar een server kan verzenden en een antwoord kan ontvangen.

Door middel van API's bent u in staat om stukjes software in uw applicatie te integreren zonder dat u daar veel moeite voor hoeft te doen. Dit proces van het gebruik van een API in uw toepassing wordt over het algemeen het verbruik van een API genoemd. Als u bijvoorbeeld een bepaalde locatie op uw website wilt weergeven, gebruikt u de Google Maps API in plaats van de kaartfunctionaliteit helemaal opnieuw te implementeren. API's verminderen daarom uw werklast en besparen u tijd.

Om te leren hoe u REST-API's in React kunt gebruiken met Fetch en Axios, bouwt u een eenvoudige React-toepassing die een willekeurig feit over katten uit een API haalt wanneer u op een knop klikt.

Soorten API's

API's kunnen worden geclassificeerd op basis van beschikbaarheid of gebruikssituatie. Wat betreft beschikbaarheid kunnen API's openbare, privé-, partner- of samengestelde API's zijn. Wanneer ze zijn geclassificeerd op basis van hun doel, kunnen ze worden database, afstandsbediening, besturingssystemen of web-API's. In dit artikel gebruiken we een type web-API genaamd REST (Representational State) API.

Met REST API's kunt u via een URL gegevens uit een bron halen. In React zijn er verschillende methoden die u kunt gebruiken om REST API's te gebruiken. Dit artikel bespreekt de twee meest populaire methoden, namelijk de JavaScript Fetch API en de op beloften gebaseerde HTTP-client Axios.

Verwant: Wat is REST API en hoe kunt u gegevens voor uw app of website ophalen?

Vereisten

Om deze handleiding te volgen, moet u beschikken over:

• Basiskennis van JavaScript.
• Basiskennis van React en React hooks.
• NPM lokaal op uw computer geïnstalleerd.
• Een teksteditor of IDE naar keuze geïnstalleerd.

Een React-toepassing maken

Eerst moet u een React-toepassing maken. Kopieer het volgende commando in je terminal om een ​​React ontwikkelomgeving op te zetten.

npx create-react-app catfact

Zodra de opdracht is uitgevoerd, opent u de catfact map in uw teksteditor. U schrijft uw code in het App.js-bestand in de src map dus ga je gang en verwijder de onnodige code.

importeer "./App.css";
functie App() {
 opbrengst (


Druk op de knop voor een willekeurig kattenfeitje!



Krijg Kat feit



 );
}
export standaard app;

Maak vervolgens een eenvoudige gebruikersinterface die wordt gebruikt om het willekeurige kattenfeit weer te geven.

In app.js

importeer './App.css';
functie App() {
 opbrengst (


Druk op de knop voor een willekeurig kattenfeitje!



Krijg Kat feit



 );
}
export standaard app;

Om uw app te stylen, voegt u de volgende code toe aan de app.css het dossier.

@import-url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.App {
 font-familie: 'Playfair Display', schreef;
 marge: 20px 15vw;
}
h2 {
 font-familie: 'Playfair Display', schreef;
 lettergewicht: 700;
 lettergrootte: 3em;
}
knop {
 vulling: 1em 1.2em;
 grens: geen;
 lettergrootte: 1em;
 achtergrondkleur: #131212;
 kleur: #ffffff;
 grensradius: 0,5 em;
 cursor: aanwijzer;
}
knop: zweef{
 achtergrondkleur:#3b3b3b;
}

Uw aanvraag zou er nu zo uit moeten zien.

In de volgende stappen haalt u gegevens op uit de API en geeft u deze weer in de applicatie.

Verwant: Hoe u uw eerste React-app met JavaScript kunt maken

REST API's consumeren met Fetch

API ophalen is een interface waarmee u bronnen van een API kunt ophalen via HTTP-verzoeken. De ophalen() methode ontvangt de URL van het pad naar de bron als een verplicht argument en retourneert een belofte die kan worden omgezet in een antwoord.

De basissyntaxis van de ophalen() methode is als volgt:

fetch(‘url naar bron’)
 .then (antwoord => // antwoord afhandelen)
 .catch (err => // omgaan met fout)

Fetch API implementeren

In React wordt de Fetch API op dezelfde manier gebruikt als in gewoon JavaScript.

ophalen(" https://catfact.ninja/fact")
 .then (respons => respons.json())
 .then (data => // gegevens verwerken)
 .catch (err => // omgaan met fout)

In de eerste regel in de bovenstaande code geeft u de API-URL door aan de ophalen() methode. ophalen() retourneert een HTTP-antwoord dat wordt geconverteerd naar JSON met behulp van de json() methode. In de derde regel krijgt u toegang tot de gegevens die u vervolgens in de applicatie kunt gebruiken. Ten slotte kunt u met het catch-blok fouten gracieus afhandelen.

Om het ophaalverzoek in de app-component te implementeren, gebruikt u React hooks. Door gebruik te maken van de gebruikEffect hook, zal uw toepassing het verzoek indienen zodra het onderdeel is geladen en de gebruikStatus hook zal de status van het onderdeel maken en bijwerken. Door de status bij te houden, zorgt u ervoor dat het onderdeel opnieuw wordt weergegeven wanneer de fetch-API het antwoord retourneert.

Verwant: Haken: de held van React

importeer useState en useEffect.
importeer { useEffect, useState } van 'react'

Creëer een status om het kattenfeit vast te houden en de functie om het bij te werken.

const [feit, setFact] = useState('')

Maak vervolgens een functie om het GET-verzoek aan de API te doen en roep het aan in de gebruikEffect haak.

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

Uw app.js-bestand zou er nu als volgt uit moeten zien:

importeer "./App.css";
importeer { useEffect, useState } van "react";
functie App() {
 const [feit, setFact] = useState("");
 const fetchFact = () => {
 ophalen(" https://catfact.ninja/fact")
 .then((reactie) => reactie.json())
 .then((data) => setFact (data.fact));
}
gebruikEffect(() => {
 fetchFact()
}, []);
opbrengst (


Druk op de knop voor een willekeurig kattenfeitje!



Krijg Kat feit
{feit}




);
}
export standaard app;

U zou nu een willekeurig feit over katten in uw browser moeten kunnen zien.

Schrijf vervolgens code om een ​​willekeurig feit weer te geven wanneer op de knop wordt geklikt.

Wijzig de knop om een ​​. op te nemen bij klikken gebeurtenis en zijn handlerfunctie.

 handleClick()}>Get Cat feit

definieer de handvatKlik() functioneren zoals hieronder weergegeven.

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

Als u nu op de knop klikt, wordt de handvatKlik() functie zal aanroepen fetchData() die het API-verzoek uitvoert en de status bijwerkt met een nieuw willekeurig feit. Bijgevolg wordt de gebruikersinterface van de toepassing bijgewerkt om het huidige feit weer te geven.

REST API's consumeren met Axios

In plaats van ophalen(), u kunt API's gebruiken met Axios. Leuk vinden ophalen(), kunt u met Axios verzoeken doen aan een API-eindpunt. Er zijn echter verschillende verschillen tussen de twee.

• Axios retourneert het antwoord automatisch in JSON terwijl je het moet converteren naar JSON bij gebruik van de Fetch API.
• Axios vereist slechts één .then() callback in tegenstelling tot de Fetch API.
• Axios is compatibel met de belangrijkste browsers, terwijl Fetch alleen wordt ondersteund in Chrome 42+, Edge 14+, Firefox 39+ en Safari 10+

Axios implementeren

Installeer Axios door de volgende opdracht uit te voeren.

npm installeer axios

Nadat de installatie is voltooid, importeert u het Axios-pakket in uw app-component en wijzigt u de fetchFact() functie om het te gebruiken.

importeer axios uit ‘axios’
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (respons.data.fact)
 });
}

Dat is het! Uw toepassing zou een willekeurig kattenfeit moeten weergeven wanneer deze in de browser wordt geladen en wanneer u op de knop klikt.

Meer toepassingen voor API's met React

U kunt REST-API's in React op verschillende manieren gebruiken. In deze tutorial heb je geleerd hoe je Fetch en Axios kunt gebruiken om een ​​willekeurig feit op te halen uit een REST API. De use cases van API's in toepassingen in de echte wereld zijn eindeloos.

Via betalings-API's zoals Stripe en PayPal kunnen winkels bijvoorbeeld eenvoudig online klanttransacties afhandelen zonder de functionaliteit zelf te hoeven implementeren. Daarom kunnen zelfs minder technologisch onderlegde gebruikers nuttige toepassingen bouwen die aan hun behoeften voldoen.

Wat is API-authenticatie en hoe werkt het?

Hoe bewijst u dat de persoon die toegang wil tot belangrijke gegevens, is wie hij zegt dat hij is? Dat is waar API-authenticatie om de hoek komt kijken...

Lees volgende

Over de auteur