Sådan bruger du API'er i React ved hjælp af Fetch og Axios

En API (Application Programming Interface) er et sæt protokoller, der gør det muligt for en applikation at sende anmodninger til en server og modtage et svar.

Gennem API'er er du i stand til at integrere stykker software i din applikation uden det sarte arbejde. Denne proces med at bruge en API i din applikation omtales generelt som at bruge en API. For eksempel, hvis du ønsker at vise en bestemt placering på dit websted, vil du bruge Google Maps API i stedet for at implementere kortfunktionaliteten fra bunden. API'er reducerer derfor din arbejdsbyrde og sparer dig tid.

For at lære, hvordan du bruger REST API'er i React ved hjælp af Fetch og Axios, vil du bygge en simpel React-applikation, der får et tilfældigt fakta om katte fra en API, når du klikker på en knap.

Typer af API'er

API'er kan klassificeres efter enten tilgængelighed eller use case. Med hensyn til tilgængelighed kan API'er være offentlige, private, partner- eller sammensatte API'er. Når de er klassificeret efter deres formål, kan de være det database, fjernbetjening, operativsystemer eller web-API'er. I denne artikel vil vi bruge en type web-API kaldet en REST (Representational State) API.

REST API'er giver dig mulighed for at hente data fra en kilde gennem en URL. I React er der flere metoder, du kan bruge til at forbruge REST API'er. Denne artikel diskuterer de to mest populære metoder, nemlig JavaScript Fetch API og den løftebaserede HTTP-klient Axios.

Relaterede: Hvad er REST API, og hvordan kan du få fat i data til din app eller hjemmeside

Forudsætninger

For at følge med i denne vejledning skal du have:

• Grundlæggende forståelse af JavaScript.
• Grundlæggende viden om React og React hooks.
• NPM installeret lokalt på din maskine.
• En teksteditor eller IDE efter eget valg installeret.

Opret en React-applikation

Først skal du oprette en React-applikation. Kopier følgende kommando i din terminal for at opsætte et React-udviklingsmiljø.

npx create-react-app catfact

Når kommandoen er fuldført, skal du åbne katfakt mappe i din teksteditor. Du vil skrive din kode i App.js-filen i src mappe, så gå videre og fjern den unødvendige kode.

import "./App.css";
funktion App() {
 Vend tilbage (


Tryk på knappen for at få et tilfældigt kattefakt!



Få Cat fact



 );
}
eksport standard app;

Derefter skal du oprette en simpel brugergrænseflade, der skal bruges til at vise det tilfældige kattefakt.

I app.js

import './App.css';
funktion App() {
 Vend tilbage (


Tryk på knappen for at få et tilfældigt kattefakt!



Få Cat fact



 );
}
eksport standard app;

For at style din app skal du tilføje følgende kode til app.css fil.

@import url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.App {
 font-family: 'Playfair Display', serif;
 margen: 20px 15vw;
}
h2 {
 font-family: 'Playfair Display', serif;
 skrifttype-vægt: 700;
 skriftstørrelse: 3em;
}
knap {
 polstring: 1em 1,2em;
 grænse: ingen;
 skriftstørrelse: 1em;
 baggrundsfarve: #131212;
 farve: #ffffff;
 grænse-radius: 0,5em;
 markør: pointer;
}
knap: hover{
 baggrundsfarve:#3b3b3b;
}

Din ansøgning skulle nu se sådan ud.

I de næste trin vil du hente data fra API'en og vise dem i applikationen.

Relaterede: Sådan opretter du din første React-app med JavaScript

Forbruger REST API'er ved hjælp af Fetch

Hent API er en grænseflade, der giver dig mulighed for at hente ressourcer fra en API gennem HTTP-anmodninger. Det hente() metoden modtager URL'en på stien til ressourcen som et obligatorisk argument og returnerer et løfte, der kan løses til et svar.

Den grundlæggende syntaks for hente() metoden er som følger:

fetch('url til ressource')
 .then (respons => // handle response)
 .catch (err => // håndtere fejl)

Implementering af Fetch API

I React bruges Fetch API'et på samme måde, som det bruges i almindelig JavaScript.

hente(" https://catfact.ninja/fact")
 .then (svar => respons.json())
 .then (data => // håndtere data)
 .catch (err => // håndtere fejl)

I den første linje i koden ovenfor sender du API-URL'en til hente() metode. hente() returnerer et HTTP-svar, som konverteres til JSON ved hjælp af json() metode. I tredje linje får du adgang til de data, som du så kan bruge i applikationen. Endelig giver catch-blokken dig mulighed for at håndtere fejl elegant.

For at implementere henteanmodningen i app-komponenten skal du bruge React hooks. Ved at bruge useEffect hook, vil din applikation fremsætte anmodningen, når komponenten er indlæst og useState hook vil oprette og opdatere komponentens tilstand. Hold styr på tilstanden sikrer, at komponenten genrenderes, når hente-API'en returnerer svaret.

Relaterede: Hooks: The Hero of React

import useState og useEffect.
importer { useEffect, useState } fra 'react'

Opret en tilstand til at holde kattefakten og funktionen til at opdatere den.

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

Derefter skal du oprette en funktion til at lave GET-anmodningen til API'et og kalde den i useEffect krog.

const fetchFact = () => {
hente(" https://catfact.ninja/fact")
 .then((respons) => respons.json())
 .then((data) => sætFakt (data.fakta));
}
useEffect(() => {
 fetchFact()
}, []);

Din app.js-fil skulle nu se sådan ud:

import "./App.css";
importer { useEffect, useState } fra "react";
funktion App() {
 const [fakta, sætFakt] = useState("");
 const fetchFact = () => {
 hente(" https://catfact.ninja/fact")
 .then((respons) => respons.json())
 .then((data) => sætFakt (data.fakta));
}
useEffect(() => {
 fetchFact()
}, []);
Vend tilbage (


Tryk på knappen for at få et tilfældigt kattefakt!



Få Cat fact
{faktum}




);
}
eksport standard app;

Du skulle nu være i stand til at se en tilfældig kendsgerning om katte vist i din browser.

Skriv derefter kode for at vise et tilfældigt faktum, når der trykkes på knappen.

Rediger knappen til at inkludere en påKlik hændelse og dens handlerfunktion.

 handleClick()}>Få Cat fact

Definer handleClick() fungerer som vist nedenfor.

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

Når du nu klikker på knappen, vises handleClick() funktionen vil kalde fetchData() som vil udføre API-anmodningen og opdatere tilstanden med et nyt tilfældigt faktum. Følgelig vil applikationens brugergrænseflade opdateres for at vise det aktuelle faktum.

Forbruger REST API'er ved hjælp af Axios

I stedet for hente(), du kan forbruge API'er med Axios. Synes godt om hente(), Axios giver dig mulighed for at lave anmodninger til et API-slutpunkt. Der er dog flere forskelle mellem de to.

• Axios returnerer automatisk svaret i JSON, mens du skal konvertere det til JSON, når du bruger Fetch API.
• Axios kræver kun ét .then()-tilbagekald i modsætning til Fetch API.
• Axios er kompatibel med større browsere, mens Fetch kun understøttes i Chrome 42+, Edge 14+, Firefox 39+ og Safari 10+

Implementering af Axios

Installer Axios ved at køre følgende kommando.

npm installere aksioer

Når installationen er fuldført, skal du importere Axios-pakken til din app-komponent og ændre fetchFact() funktion for at bruge det.

importer axios fra 'axios'
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

Det er det! Din applikation bør vise en tilfældig kattefakta, når den indlæses i browseren, og når du klikker på knappen.

Flere anvendelser af API'er med React

Du kan bruge REST API'er i React ved hjælp af forskellige metoder. I denne tutorial lærte du, hvordan du bruger Fetch og Axios til at hente en tilfældig kendsgerning fra en REST API. Anvendelsen af ​​API'er i applikationer fra den virkelige verden er uendelige.

For eksempel kan butikker via betalings-API'er som Stripe og PayPal nemt håndtere kundetransaktioner online uden selv at skulle implementere funktionaliteten. Derfor kan endnu mindre teknologikyndige brugere bygge nyttige applikationer, der opfylder deres behov.

Hvad er API-godkendelse, og hvordan fungerer det?

Hvordan beviser du, at den person, der ønsker at få adgang til vigtige data, er den, de siger, de er? Det er her API-godkendelse kommer ind...

Læs Næste

Om forfatteren