Sådan bruges Fetch til at foretage AJAX-opkald i JavaScript

Jeg vil regelmæssigt dele bite sized lærdomme om JavaScript i denne serie. Vi dækker JS-grundlæggende, browsere, DOM, systemdesign, domænearkitektur og rammer.

Fetch er en grænseflade til at foretage en AJAX-anmodning i JavaScript. Det implementeres bredt af moderne browsere og bruges til at kalde en API.

const promise = fetch(url, [options]) 

Calling fetch returnerer et løfte med et Response-objekt. Løftet afvises, hvis der er en netværksfejl, og det løses, hvis der ikke er noget problem at oprette forbindelse til serveren, og serveren reagerede på en statuskode. Denne statuskode kan være 200, 400 eller 500.

En prøve FETCH-anmodning -

 fetch(url) .then(response => response.json()) .catch(err => console.log(err)) 

Anmodningen sendes som en GET som standard. For at sende en POST / PATCH / DELETE / PUT kan du bruge metodeegenskaben som en del af optionsparameteren. Nogle andre mulige værdier optionskan tage -

  • method: såsom GET, POST, PATCH
  • headers: Overskrifter objekt
  • mode: Såsom cors, no-cors,same-origin
  • cache: cache-tilstand til anmodning
  • credentials
  • body

Se den fulde liste over tilgængelige muligheder her

Eksempel på brug:

Dette eksempel viser brugen af ​​hentning til at ringe til en API og få en liste over git-arkiver.

const url = '//api.github.com/users/shrutikapoor08/repos'; fetch(url) .then(response => response.json()) .then(repos => { const reposList = repos.map(repo => repo.name); console.log(reposList); }) .catch(err => console.log(err)) 

For at sende en POST-anmodning skal du her se, hvordan metodeparameteren kan bruges med asynkronisering / afventer syntaks.

const params = { id: 123 } const response = await fetch('url', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(params) }); const data = await response.json(); 

Er du interesseret i flere JSBytes? Tilmeld dig nyhedsbrevet