Hur man konsumerar API: er i React med hjälp av Fetch och Axios

Ett API (Application Programming Interface) är en uppsättning protokoll som gör att en applikation kan skicka förfrågningar till en server och ta emot ett svar.

Genom API: er kan du integrera programvaror i din applikation utan det tråkiga arbetet. Den här processen att använda ett API i din applikation kallas i allmänhet för att konsumera ett API. Om du till exempel vill visa en viss plats på din webbplats, skulle du använda Google Maps API istället för att implementera kartfunktionaliteten från början. API: er minskar därför din arbetsbelastning och sparar tid.

För att lära dig hur man konsumerar REST API: er i React med hjälp av Fetch och Axios kommer du att bygga en enkel React-applikation som får ett slumpmässigt fakta om katter från ett API när du klickar på en knapp.

Typer av API: er

API: er kan klassificeras efter antingen tillgänglighet eller användningsfall. När det gäller tillgänglighet kan API: er vara offentliga, privata, partner eller sammansatta API: er. När de klassificeras enligt deras syfte kan de vara det databas, fjärrkontroll, operativsystem eller webb-API: er. I den här artikeln kommer vi att använda en typ av webb-API som kallas REST (Representational State) API.

REST API: er låter dig hämta data från en källa via en URL. I React finns det flera metoder du kan använda för att konsumera REST API: er. Den här artikeln diskuterar de två mest populära metoderna, nämligen JavaScript Fetch API och den löftesbaserade HTTP-klienten Axios.

Relaterad: Vad är REST API och hur kan du ta data för din app eller webbplats

Förutsättningar

För att följa med den här guiden bör du ha:

• Grundläggande förståelse för JavaScript.
• Grundläggande kunskap om React och React-krokar.
• NPM installerat lokalt på din maskin.
• En textredigerare eller IDE efter eget val installerad.

Skapa en React-applikation

Först måste du skapa en React-applikation. Kopiera följande kommando i din terminal för att ställa in en React-utvecklingsmiljö.

npx create-react-app catfact

När kommandot är klart, öppna kattfakt mapp i din textredigerare. Du kommer att skriva din kod i filen App.js i src mapp så fortsätt och ta bort den onödiga koden.

importera "./App.css";
function App() {
 lämna tillbaka (


Tryck på knappen för ett slumpmässigt kattfaktum!



Få Cat fact



 );
}
exportera standardapp;

Skapa sedan ett enkelt användargränssnitt som kommer att användas för att visa det slumpmässiga kattfaktumet.

I app.js

importera './App.css';
function App() {
 lämna tillbaka (


Tryck på knappen för ett slumpmässigt kattfaktum!



Få Cat fact



 );
}
exportera standardapp;

För att styla din app, lägg till följande kod till 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;
 marginal: 20px 15vw;
}
h2 {
 font-family: 'Playfair Display', serif;
 teckensnittsvikt: 700;
 teckenstorlek: 3em;
}
knapp {
 stoppning: 1em 1,2em;
 gräns: ingen;
 teckenstorlek: 1em;
 bakgrundsfärg: #131212;
 färg: #ffffff;
 gränsradie: 0,5em;
 markör: pekare;
}
knapp: hover{
 bakgrundsfärg:#3b3b3b;
}

Din ansökan ska nu se ut så här.

I nästa steg kommer du att hämta data från API: et och visa det i applikationen.

Relaterad: Hur du skapar din första React-app med JavaScript

Konsumerar REST API: er med hjälp av Fetch

Hämta API är ett gränssnitt som låter dig få resurser från ett API genom HTTP-förfrågningar. De hämta() metod tar emot webbadressen till sökvägen till resursen som ett obligatoriskt argument och returnerar ett löfte som kan lösas till ett svar.

Den grundläggande syntaxen för hämta() metoden är som följer:

fetch('url till resurs')
 .then (svar => // hantera svar)
 .catch (err => // handtagsfel)

Implementerar Fetch API

I React används Fetch API på samma sätt som det används i vanlig JavaScript.

hämta(" https://catfact.ninja/fact")
 .then (respons => response.json())
 .then (data => // hantera data)
 .catch (err => // handtagsfel)

På den första raden i koden ovan skickar du in API-webbadressen till hämta() metod. hämta() returnerar ett HTTP-svar som konverteras till JSON med hjälp av json() metod. På tredje raden får du tillgång till data som du sedan kan använda i applikationen. Slutligen låter fångstblocket dig hantera fel elegant.

För att implementera hämtningsförfrågan i appkomponenten använder du React hooks. Genom att använda useEffect krok, kommer din applikation att göra begäran när komponenten laddas och useState hook kommer att skapa och uppdatera komponentens tillstånd. Att hålla reda på tillstånd säkerställer att komponenten återrenderas när hämta-API: et returnerar svaret.

Relaterad: Hooks: The Hero of React

import useState och useEffect.
importera { useEffect, useState } från 'react'

Skapa ett tillstånd för att hålla kattfaktumet och funktionen för att uppdatera det.

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

Skapa sedan en funktion för att göra GET-begäran till API: t och anropa den i useEffect krok.

const fetchFact = () => {
hämta(" https://catfact.ninja/fact")
 .then((respons) => response.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);

Din app.js-fil bör nu se ut så här:

importera "./App.css";
importera { useEffect, useState } från "react";
function App() {
 const [fakta, setFakt] = useState("");
 const fetchFact = () => {
 hämta(" https://catfact.ninja/fact")
 .then((respons) => response.json())
 .then((data) => setFact (data.fact));
}
useEffect(() => {
 fetchFact()
}, []);
lämna tillbaka (


Tryck på knappen för ett slumpmässigt kattfaktum!



Få Cat fact
{faktum}




);
}
exportera standardapp;

Du bör nu kunna se ett slumpmässigt fakta om katter som visas i din webbläsare.

Skriv sedan kod för att visa ett slumpmässigt faktum när knappen klickas.

Ändra knappen för att inkludera en påKlicka händelse och dess hanterarfunktion.

 handleClick()}>Hämta kattfakta

Definiera handleClick() fungerar som visas nedan.

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

Nu, när du klickar på knappen, visas handleClick() funktionen anropar fetchData() som kommer att utföra API-begäran och uppdatera tillståndet med ett nytt slumpmässigt faktum. Följaktligen kommer applikationens användargränssnitt att uppdateras för att visa aktuellt faktum.

Konsumerar REST API: er med Axios

Istället för hämta(), du kan konsumera API: er med Axios. Tycka om hämta(), Axios låter dig göra förfrågningar till en API-slutpunkt. Det finns dock flera skillnader mellan de två.

• Axios returnerar automatiskt svaret i JSON medan du måste konvertera det till JSON när du använder Fetch API.
• Axios kräver bara en .then()-återuppringning till skillnad från Fetch API.
• Axios är kompatibelt med större webbläsare medan Fetch endast stöds i Chrome 42+, Edge 14+, Firefox 39+ och Safari 10+

Implementering av Axios

Installera Axios genom att köra följande kommando.

npm installera axios

När installationen är klar, importera Axios-paketet till din appkomponent och ändra fetchFact() funktion för att använda den.

importera axios från "axios"
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

Det är allt! Din applikation bör visa en slumpmässig kattfakta när den laddas i webbläsaren och när du klickar på knappen.

Fler användningsområden för API: er med React

Du kan använda REST API: er i React med olika metoder. I den här handledningen lärde du dig hur du använder Fetch och Axios för att hämta ett slumpmässigt faktum från ett REST API. Användningsfallen för API: er i verkliga applikationer är oändliga.

Till exempel, genom betalnings-API: er som Stripe och PayPal kan butiker enkelt hantera kundtransaktioner online utan att behöva implementera funktionen själva. Därför kan även mindre teknikkunniga användare bygga användbara applikationer som uppfyller deras behov.

Vad är API-autentisering och hur fungerar det?

Hur bevisar man att personen som vill komma åt viktig data är den man säger sig vara? Det är där API-autentisering kommer in...

Läs Nästa

Om författaren