Comment utiliser Fetch pour effectuer des appels AJAX en JavaScript

Je partagerai régulièrement des informations sur JavaScript dans cette série. Nous couvrirons les principes de base de JS, les navigateurs, le DOM, la conception du système, l'architecture de domaine et les frameworks.

Fetch est une interface pour faire une requête AJAX en JavaScript. Il est largement implémenté par les navigateurs modernes et est utilisé pour appeler une API.

const promise = fetch(url, [options]) 

L'appel de fetch renvoie une promesse, avec un objet Response. La promesse est rejetée en cas d'erreur réseau et résolue s'il n'y a pas de problème de connexion au serveur et que le serveur a répondu un code d'état. Ce code d'état peut être 200, 400 ou 500.

Un exemple de demande FETCH -

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

La demande est envoyée en tant que GET par défaut. Pour envoyer un POST / PATCH / DELETE / PUT, vous pouvez utiliser la propriété de méthode dans le cadre du optionsparamètre. Certaines autres valeurs possibles optionspeuvent prendre -

  • method: comme GET, POST, PATCH
  • headers: Objet Headers
  • mode: Par exemple cors, no-cors,same-origin
  • cache: mode cache pour la demande
  • credentials
  • body

Consultez la liste complète des options disponibles ici

Exemple d'utilisation:

Cet exemple illustre l'utilisation de fetch pour appeler une API et obtenir une liste de référentiels git.

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

Pour envoyer une requête POST, voici comment le paramètre de méthode peut être utilisé avec la syntaxe 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(); 

Intéressé par plus de JSBytes? Enregistrez-vous pour recevoir le bulletin d'informations