În această serie, voi împărtăși în mod regulat informații despre JavaScript. Vom acoperi elementele fundamentale JS, browserele, DOM, proiectarea sistemului, arhitectura domeniului și cadrele.

Fetch este o interfață pentru efectuarea unei cereri AJAX în JavaScript. Este implementat pe scară largă de browserele moderne și este folosit pentru a apela un API.

const promise = fetch(url, [options])

Apelarea preluării returnează o promisiune, cu un obiect Răspuns. Promisiunea este respinsă dacă există o eroare de rețea și este rezolvată dacă nu există nicio problemă la conectarea la server și serverul a răspuns unui cod de stare. Acest cod de stare ar putea fi 200, 400 sau 500.

Un eșantion de cerere FETCH –


fetch(url)
  .then(response => response.json())
  .catch(err => console.log(err))
Citește mai multCum se face o promisiune dintr-o funcție de apel invers în JavaScript

Solicitarea este trimisă ca GET în mod implicit. Pentru a trimite un POST / PATCH / DELETE / PUT puteți utiliza proprietatea metodei ca parte a options parametru. Alte valori posibile options poate lua –

  • method: cum ar fi GET, POST, PATCH
  • headers: Obiect antet
  • mode: ca cors, no-cors, same-origin
  • cache: modul cache pentru cerere
  • credentials
  • body

Consultați lista completă a opțiunilor disponibile aici

Exemplu de utilizare:
Acest exemplu demonstrează utilizarea fetch pentru a apela un API și pentru a obține o listă de depozite git.

const url="https://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))

Pentru a trimite o cerere POST, iată cum poate fi utilizat parametrul metodei cu sintaxa asincronizată / 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();

Vă interesează mai multe JSBytes? Înscrieți-vă la newsletter