APIer, eller Application Programming Interfaces, er et utrolig nyttig verktøy for å få tilgang til data fra en ekstern kilde. Henting, lagring og bruk av disse dataene krever vanligvis et programmatisk API-kall, som kan gjøres ved å bruke et språk som JavaScript. I denne artikkelen skal vi diskutere hvordan data kan hentes via fetch()-funksjonen i JavaScript, og deretter analysere et ofte brukt API som kan nås via en HTML-tag:Wikipedia API.
hente()ing-data
Når du arbeider med en API, er et vanlig utgangspunkt å kalle APIen for å hente noe informasjon. Denne informasjonen kan deretter lagres i en variabel i applikasjonen din, som gir deg mange alternativer for å bruke og manipulere disse dataene. En måte dette kan gjøres på i JavaScript er å bruke funksjonen fetch(), som direkte kaller på en API ved å behandle API-lenken som en parameter.
Nedenfor er et eksempel på et fetch()-kall, som får tilgang til et API kalt "FreeGeoIP" som returnerer en brukers IP-adresse når det kalles:
Som du kan se, håndterer getGEOIPData()-funksjonen fetch()-metodekallet, der API-ens lenke er en av parameterne som sendes inn i fetch(). API-kallet når ut til API-en ved denne koblingen, og bruker deretter svaret som returneres for å bestemme om data skal lagres fra hente()-kallet. I dette tilfellet vil et vellykket API-kall gi oss tilgang til informasjon som IP-adressens geografiske koordinater, by og stat, som vi lagrer lenger ned i getGEOIPData()-funksjonen.
Siden jeg jobber med LitElement i dette tilfellet, kan du se at jeg tildeler dataene jeg fikk tilbake til globale variabler som opprinnelig ble opprettet i applikasjonens konstruktør. Dette lar meg mutere plasseringsinformasjonen i konstruktøren min, og overføre dataendringene mine gjennom hele nettsiden min, hver gang jeg foretar et nytt anrop til API-et – for eksempel når jeg trykker på en knapp for å kalle den eller oppdatere siden.
Wikipedia API
Ved å bruke dataene vi lagret i getGEOIPData(), kunne vi lære mer om plasseringen som IP-adressen vår er knyttet til ved å jobbe med Wikipedia API. Wikipedia API kan også nås ved å bruke et hente()-kall, eller gjennom denne veldig kule HTML-taggen som forenkler kallet til en integrerbar komponent. For denne artikkelen bruker vi den taggen, som heter wikipedia-query . Dette er utrolig nyttig, siden en enkel import og implementering av taggen lar oss legge inn en forhåndsvisning av en Wikipedia-artikkel direkte på nettsiden vår, slik:
Alt du ender opp med å legge til HTML-en din, eller i mitt tilfelle render()-funksjonen i Lit-implementeringen min, er en wikipedia-query tag med søkeparameteren knyttet til det jeg vil. Nedenfor kan du se de tre forskjellige alternativene jeg gikk med – som alle er informasjon jeg hentet fra IP-adressedataene som ble returnert fra API-kallet diskutert tidligere:
Ved å bruke en tag som de som er avbildet ovenfor og et importanrop, kan jeg veldig enkelt lære mer om min nåværende posisjon basert på IP-adressen enheten min bruker for å få tilgang til internett – alt på en nettside!
Alt dette er mulig fordi Wikipedias kraftige API lar en bruker legge inn et søkeord i et API-kall, og returnerer samlet informasjon som deretter elegant kan presenteres for en bruker.
Dette skraper bare i overflaten av APIer og deres evner, men det viser hvor ubegrensede bruken og mulighetene deres kan være!