JavaScript GET-anmodninger:En vejledning

Vil du lave en GET-anmodning fra JavaScript på en webside for at vise nogle data eller oplysninger fra en API? I skærmbilledet ovenfor bliver al den information, live, trukket ind på en webside.

Du kan se koden fra skærmbilledet i aktion her på javascriptpage. Det kan tage op til et par sekunder at indlæse, fordi det henter dataene fra en API (det er også på et gratis niveau uden godkendelse).

Jeg har ikke håndkodet nogen af ​​de prisoplysninger , husk -  det hele kommer fra en API.

Ved at skrive GET-anmodninger i JavaScript ind i din kode, kan du også få det til at ske.

Lad os starte med API'et. For at lave en GET-anmodning skal du anmode om den fra en API.

API står for Application Programming Interface .

En API er et slutpunkt - en URL - du besøger for at få noget til gengæld.

I dette tilfælde laver vi en GET-anmodning, som API'en besvarer med tekst.

Her bruger vi en API kaldet DomainsDB.info til at hente information som svar på en anmodning.

Se som et eksempel på GET-anmodningen nedenfor, som henter alle websider, der har medium i deres navn.

https://api.domainsdb.info/v1/domains/search?domain=medium&zone=com

Du kan se API-returneringerne blot ved at besøge den i din browser. Klik på linket; du vil se tekst, som på dette skærmbillede (temmelig udskrevet med en udvidelse i min browser).

Det ser ikke særlig godt ud og er svært at læse, da det kun er tekst, uden styling - det vil sige uden flot HTML og CSS for at gøre det poleret.

Dette er et almindeligt API-brugstilfælde. API'ens dispenserer almindelig tekst. Det er op til dig at udføre UI-arbejdet til præsentation på dit websted.

Dette er også realtidsinformation, så i modsætning til noget, der er hårdkodet, vil det ikke gå forældet. Med andre ord, denne information vil ændre sig, efterhånden som API'en får ny information - og da dette er prisinformation, vil det hele tiden ændre sig.

Sådan ser det ud, efter at jeg har stylet det og indsat det i et pænt format på min side (som viser dig den zoomede ud, så du kan se, hvor meget information der returneres).

https://javascriptpage.s3.amazonaws.com/javascript-get-request-rows.html

JavaScript-koden til at gøre dette er vist nedenfor.

const url='https://api.domainsdb.info/v1/domains/search?domain=medium&zone=com'
 const proxy = 'https://cors-anywhere.herokuapp.com/'
 fetch(proxy + url)
 .then(blob => blob.json())
 .then(data => {
 let items=[];
 data.domains.map(element => items.push(element.domain));
 const lines=data.domains.map((element) => "<p>"+ element.domain + "</p>");
...

Du undrer dig måske over, hvorfor der er en proxy derinde.

I dette tilfælde er det fordi API-kaldet ikke ville fungere uden det. Fjernelse af det ville resultere i en CORS-fejl, som er en helt anden vokskugle (se linket for en dybdegående forklaring).

Men grundlæggende blokerer browsere som standard frontend-kode fra at få adgang til ressourcer på andre servere. Du bruger en proxy til at omgå den fejl.

'Kort'-koden ovenfor tager svaret fra API'et og bruger det til at skabe et udtryk, der er klar til at blive brugt - en streng, der består af mange HTML-tags, der kan slippes ind hvor som helst på en html-side.

Du vil også bemærke, at jeg brugte hentemetoden. Du kan bruge enten fetch eller xhr (XMLHttpRequest), men jeg synes, fetch er lidt nemmere at skrive og begrunde.

Denne kode henter dataene. Nu hvor du har dataene, skal du vise dem.

Her er koden, der knytter den til min specielt stylede div til dette.

document.querySelector(".box").innerHTML = lines.join('');
 })

Her er div'en, hvor det går, med klassen "boks" (hvordan querySelector identificerer den), efter jeg har hentet den.

<div class="box">
</div>

Sådan ser koden ud i en .html-fil på én side.

https://gist.github.com/julianeon/05b054b258b6875e4d6f4c3e0920e289

Du kan downloade filen, åbne den i en kodeeditor, omdøbe den til .html, foretage ændringer i den og se, hvordan det ændrer siden, når du genåbner den samme fil i din browser (som vil gengives som en normal webside ).

Du kan se html-siden live her.

https://javascriptpage.s3.amazonaws.com/javascript-get-request-rows.html

Her er en lidt anderledes version, der i stedet for at søge efter 'medium' hver gang, giver dig mulighed for at søge efter specifik tekst gennem et inputfelt. Klik på knappen for at køre søgningen.

https://javascriptpage.s3.amazonaws.com/javascript-get-request-submit.html

Der er også noget CSS derinde til at lave alle farverne, og selvom det er i koden for dig at undersøge, vil jeg ikke gå ind i det her, fordi det ikke er afgørende for lektionen. Du kan fjerne det hele, og det ville ikke ændre kerne-API'en/get request.content.

Faktisk, bare for sammenligningens skyld, er her en meget enklere version, der bare viser sort på hvid tekst.


Samme indhold, anderledes stil.

https://javascriptpage.s3.amazonaws.com/javascript-get-request-rows-bw.html

Så det er sådan, du laver en GET-anmodning. Så enkelt er det! (Nå, måske ikke så enkelt.)

API-anmodninger kan blive meget mere komplicerede end dette - et almindeligt brugstilfælde ville involvere en API, du for eksempel skal autentificere mod - men dette burde få ideen igennem.

Med andre ord, mens detaljerne kan ændre sig, er dette den generelle procedure; du kan bruge GET-anmodninger og JavaScript til at præsentere information på alle mulige måder.

Prøv at finde en API efter eget valg (se denne liste) for at eksperimentere på egen hånd. På ingen tid vil du også være i stand til at fylde den webside efter eget valg med API-indhold.

Mit navn er Julian Martinez, og jeg er konsulent og udvikler. Du kan besøge https://javascriptpage.com for at se lignende tutorials eller diskutere et projekt. Eller du kan følge mig på Twitter.