Kako koristiti dohvaćanje za upućivanje AJAX poziva u JavaScriptu

U ovoj ću seriji redovito dijeliti učenja o JavaScriptu veličine zalogaja. Obradit ćemo JS osnove, preglednike, DOM, dizajn sustava, arhitekturu domene i okvire.

Dohvaćanje je sučelje za izradu AJAX zahtjeva u JavaScript-u. Suvremeni ga preglednici široko primjenjuju i koristi se za pozivanje API-ja.

const promise = fetch(url, [options]) 

Pozivanje dohvaćanja vraća obećanje s objektom Response. Obećanje se odbija ako postoji mrežna pogreška i rješava se ako nema problema s povezivanjem s poslužiteljem i poslužitelj je odgovorio na statusni kôd. Ovaj statusni kôd može biti 200, 400 ili 500.

Uzorak zahtjeva za FETCH -

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

Zahtjev se prema zadanim postavkama šalje kao GET. Da biste poslali POST / PATCH / DELETE / PUT, možete koristiti svojstvo metode kao dio optionsparametra. Neke druge moguće vrijednosti optionsmogu uzeti -

  • method: kao što su GET, POST, PATCH
  • headers: Objekt zaglavlja
  • mode: Kao što je cors, no-cors,same-origin
  • cache: način predmemorije za zahtjev
  • credentials
  • body

Potpuni popis dostupnih opcija pogledajte ovdje

Primjer upotrebe:

Ovaj primjer pokazuje upotrebu dohvaćanja za pozivanje API-ja i za dobivanje popisa git spremišta.

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)) 

Da biste poslali POST zahtjev, evo kako se parametar metode može koristiti sa sintaksom async / await.

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(); 

Zanima vas više JSBytes-a? Prijavite se za bilten