Hvordan hente data fra et API i JavaScript

Når du bygger en virkelig applikasjon i JavaScript, må applikasjonen samhandle med API -er å sende og motta data. I JavaScript er det mange måter å samhandle med et API, men den vanligste og mest grunnleggende måten å samhandle med et API på er ved å bruke Hente () metode fra Hente api levert av nettleseren. I dette innlegget skal vi lære å få data fra en Mock API Bruke Vanilla JavaScript og Fetch API.

Fetch () -metoden

Denne metoden brukes til å samle inn data fra et hvilket som helst API som svarer på forespørselen fra en klient i form av JSON eller XML. Syntaksen til Fetch -metoden er ganske enkel, det tar bare ett obligatorisk argument og en valgfri parameter som

hente (URL, alternativer);

• URL: URLen til API for å nå og be om svar i form av JSON eller XML
• Alternativer: Valgfrie parametere som hjelper oss å endre forespørselen fra "få" til "post" og andre varianter
• Merk: Hente -metoden returnerer et løfte

For å bruke Fetch () -metoden i JavaScript -. Med async -funksjonen er syntaksen definert som

async funksjonsfunksjon_identifier (url)
const Response = Await Fetch (URL);
var data = venter på svar.json ();

Fetching data fra en API ved hjelp av Fetch () -metode i JavaScript

For å teste ut Fetch () -metoden for å hente data fra en API, trenger du en dummy API eller et hånlig API. For dette formålet bruker vi Dummy API levert av Req | res med nettadressen “https: // reqres.IN/API/PRODUKTER/3”.

Den andre tingen vi trenger er en grunnleggende forståelse av hvordan løfter Arbeid i JavaScript, for å lære om løfter i JavaScript kan du besøke denne lenken.

Neste gang trenger vi en dummy html -side med noen grunnleggende elementer inni den. For dette eksemplet brukte vi følgende linjer i HTML:

Hente data fra API

Dette skal gi oss følgende webside:

For JavaScript -koden er det første vi trenger å gjøre å lagre nettadressen i en egen variabel med følgende linje:

const url = "https: // reqres.IN/API/PRODUKTER/3 ";

Så definerer vi en async -funksjon for å få dataene fra API ved å bruke URL Vi lagret nettopp med følgende linjer:

async funksjon getDataFromapi (url)
const Response = Await Fetch (URL);
var data = venter på svar.json ();
konsoll.logg (data);

Det vi gjør i denne koden er at vi venter på en love fra hente (url) og lagrer det løftet inne i respons variabel.

Når vi har fått løftet, må vi konvertere det til JSON -formatet ved å bruke respons.JSON (). Siden respons.JSON () er også et løfte som returnerer data, vi bruker nøkkelordet avvente.

Til slutt skriver vi ut dataene som er hentet fra API ved hjelp av konsollloggfunksjonen.

Nå, alt vi trenger å gjøre er å kalle denne async -funksjonen og passere i nettadressen til API med følgende linje:

getDatafromapi (URL);

Det komplette kodebiten er:

const url = "https: // reqres.IN/API/PRODUKTER/3 ";
async funksjon getDataFromapi (url)
const Response = Await Fetch (URL);
var data = venter på svar.json ();
konsoll.logg (data);

getDataFromapi (URL);

Hvis du kjører denne websiden og drar over til konsollen i nettleserens utviklerverktøy, vil du se følgende utdata:

Det er det, du har hentet data fra et API ved hjelp av JavaScript.

Konklusjon

De hente () metode fra Hente api kan brukes til å hente data fra en Api I Vanilla JavaScript. Når du jobber med virkelige applikasjoner, må du vite hvordan du kan samhandle med et API for å sende og motta data. I dette innlegget gikk vi over Fetch () -metoden for å sende en REQ til et hånlig API og mottok data fra det API, og konverterte deretter disse dataene til JSON ved hjelp av løfter, slik at den kan brukes i vår applikasjon.