Hvordan konsumere APIer i React ved å bruke Fetch og Axios

Et API (Application Programming Interface) er et sett med protokoller som lar en applikasjon sende forespørsler til en server og motta et svar.

Gjennom API-er er du i stand til å integrere deler av programvare i applikasjonen din uten det tøffe arbeidet. Denne prosessen med å bruke en API i applikasjonen din blir generelt referert til som å forbruke en API. Hvis du for eksempel vil vise en bestemt plassering på nettstedet ditt, vil du bruke Google Maps API i stedet for å implementere kartfunksjonaliteten fra bunnen av. APIer reduserer derfor arbeidsmengden og sparer tid.

For å lære hvordan du bruker REST API-er i React ved å bruke Fetch og Axios, vil du bygge en enkel React-applikasjon som får et tilfeldig fakta om katter fra et API når du klikker på en knapp.

Typer APIer

API-er kan klassifiseres etter tilgjengelighet eller brukstilfelle. Når det gjelder tilgjengelighet, kan APIer være offentlige, private, partnere eller sammensatte APIer. Når de er klassifisert i henhold til deres formål, kan de bli det database, fjernkontroll, operativsystemer eller web-APIer. I denne artikkelen vil vi bruke en type web-API kalt en REST (Representational State) API.

REST APIer lar deg hente data fra en kilde gjennom en URL. I React er det flere metoder du kan bruke for å konsumere REST APIer. Denne artikkelen diskuterer de to mest populære metodene, nemlig JavaScript Fetch API og den løftebaserte HTTP-klienten Axios.

I slekt: Hva er REST API og hvordan kan du hente data for appen eller nettstedet ditt

Forutsetninger

For å følge denne veiledningen, bør du ha:

• Grunnleggende forståelse av JavaScript.
• Grunnleggende kunnskap om React, og React-kroker.
• NPM installert lokalt på maskinen din.
• Et tekstredigeringsprogram eller IDE etter eget valg er installert.

Opprett en React-applikasjon

Først må du opprette en React-applikasjon. Kopier følgende kommando i terminalen din for å sette opp et React-utviklingsmiljø.

npx create-react-app catfact

Når kommandoen er fullført, åpner du katfakt mappen i tekstredigeringsprogrammet. Du vil skrive koden din i App.js-filen i src mappen, så fortsett og fjern den unødvendige koden.

import "./App.css";
funksjon App() {
 komme tilbake (


Trykk på knappen for et tilfeldig kattefakt!



Få Cat fact



 );
}
eksport standard app;

Deretter lager du et enkelt brukergrensesnitt som skal brukes til å vise det tilfeldige kattefaktet.

I app.js

importer './App.css';
funksjon App() {
 komme tilbake (


Trykk på knappen for et tilfeldig kattefakt!



Få Cat fact



 );
}
eksport standard app;

For å style appen din, legg til følgende kode i 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;
 margin: 20px 15vw;
}
h2 {
 font-family: 'Playfair Display', serif;
 font-vekt: 700;
 skriftstørrelse: 3em;
}
knapp {
 polstring: 1em 1,2em;
 grense: ingen;
 skriftstørrelse: 1em;
 bakgrunnsfarge: #131212;
 farge: #ffffff;
 kantradius: 0,5em;
 markør: peker;
}
knapp: hover{
 bakgrunnsfarge:#3b3b3b;
}

Søknaden din skal nå se slik ut.

I de neste trinnene vil du hente data fra API og vise dem i applikasjonen.

I slekt: Hvordan lage din første reaksjonsapp med JavaScript

Bruker REST APIer ved å bruke Fetch

Hent API er et grensesnitt som lar deg hente ressurser fra et API gjennom HTTP-forespørsler. De hente() metode mottar URL-en til banen til ressursen som et obligatorisk argument og returnerer et løfte som kan løses til et svar.

Den grunnleggende syntaksen til hente() metoden er som følger:

hente('url til ressurs')
 .then (respons => // handle respons)
 .catch (err => // håndtere feil)

Implementering av Fetch API

I React brukes Fetch API på samme måte som det brukes i vanlig JavaScript.

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

I den første linjen i koden ovenfor sender du inn API-URLen til hente() metode. hente() returnerer et HTTP-svar som konverteres til JSON ved hjelp av json() metode. I tredje linje får du tilgang til dataene som du så kan bruke i applikasjonen. Til slutt lar catch-blokken deg håndtere feil elegant.

For å implementere henteforespørselen i appkomponenten, bruker du React-hooks. Ved å bruke useEffect hekte, vil applikasjonen din sende forespørselen når komponenten er lastet inn og useState hook vil opprette og oppdatere tilstanden til komponenten. Å holde oversikt over tilstanden sikrer at komponenten gjengis på nytt når hente-API-en returnerer svaret.

I slekt: Hooks: The Hero of React

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

Opprett en tilstand for å holde katten fakta og funksjonen for å oppdatere den.

const [fakta, settFakt] = useState('')

Deretter oppretter du en funksjon for å sende GET-forespørselen til API-en og kaller den inn useEffect krok.

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

App.js-filen din skal nå se slik ut:

import "./App.css";
importer { useEffect, useState } fra "react";
funksjon App() {
 const [fakta, settFakt] = useState("");
 const fetchFact = () => {
 hente(" https://catfact.ninja/fact")
 .then((respons) => respons.json())
 .then((data) => settFakt (data.fakta));
}
useEffect(() => {
 fetchFact()
}, []);
komme tilbake (


Trykk på knappen for et tilfeldig kattefakt!



Få Cat fact
{faktum}




);
}
eksport standard app;

Du skal nå kunne se et tilfeldig faktum om katter vist i nettleseren din.

Deretter skriver du kode for å vise et tilfeldig faktum når du klikker på knappen.

Endre knappen for å inkludere en ved trykk hendelse og dens behandlerfunksjon.

 handleClick()}>Få Cat fact

Definer handleClick() fungerer som vist nedenfor.

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

Nå, når du klikker på knappen, vises handleClick() funksjonen vil ringe fetchData() som vil utføre API-forespørselen og oppdatere staten med et nytt tilfeldig faktum. Følgelig vil applikasjonens brukergrensesnitt oppdateres for å vise gjeldende faktum.

Forbruker REST APIer ved å bruke Axios

I stedet for hente(), du kan bruke APIer med Axios. Som hente(), Axios lar deg sende forespørsler til et API-endepunkt. Det er imidlertid flere forskjeller mellom de to.

• Axios returnerer automatisk svaret i JSON mens du må konvertere det til JSON når du bruker Fetch API.
• Axios krever bare ett .then()-tilbakekall i motsetning til Fetch API.
• Axios er kompatibel med store nettlesere mens Fetch kun støttes i Chrome 42+, Edge 14+, Firefox 39+ og Safari 10+

Implementering av Axios

Installer Axios ved å kjøre følgende kommando.

npm installer aksioer

Etter at installasjonen er fullført, importerer du Axios-pakken til appkomponenten din og endrer fetchFact() funksjon for å bruke den.

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

Det er det! Applikasjonen din skal vise et tilfeldig kattefakt når den laster inn i nettleseren og når du klikker på knappen.

Flere bruksområder for APIer med React

Du kan bruke REST APIer i React ved å bruke forskjellige metoder. I denne opplæringen lærte du hvordan du bruker Fetch og Axios for å hente et tilfeldig faktum fra en REST API. Bruken av API-er i virkelige applikasjoner er uendelige.

For eksempel, gjennom betalings-APIer som Stripe og PayPal, kan butikker enkelt håndtere kundetransaksjoner på nett uten å måtte implementere funksjonaliteten selv. Derfor kan enda mindre teknologikyndige brukere bygge nyttige applikasjoner som dekker deres behov.

Hva er API-autentisering og hvordan fungerer det?

Hvordan beviser du at personen som ønsker å få tilgang til viktige data er den de sier de er? Det er her API-autentisering kommer inn...

Les Neste

Om forfatteren