Article original : How to Use Fetch to Make AJAX Calls in JavaScript
Je vais partager des apprentissages concis sur JavaScript régulièrement dans cette série. Nous aborderons les fondamentaux de JS, les navigateurs, le DOM, la conception système, l'architecture de domaine et les frameworks.
Fetch est une interface pour faire une requête AJAX en JavaScript. Elle est largement implémentée par les navigateurs modernes et est utilisée pour appeler une API.
const promise = fetch(url, [options])
Appeler fetch retourne une promesse, avec un objet Response. La promesse est rejetée s'il y a une erreur réseau, et elle est résolue s'il n'y a pas de problème de connexion au serveur et que le serveur a répondu avec un code de statut. Ce code de statut peut être 200, 400 ou 500.
Un exemple de requête FETCH -
fetch(url)
.then(response => response.json())
.catch(err => console.log(err))
La requête est envoyée en GET par défaut. Pour envoyer un POST / PATCH / DELETE / PUT, vous pouvez utiliser la propriété method dans le paramètre options. Voici quelques autres valeurs possibles pour options :
method: comme GET, POST, PATCHheaders: objet Headersmode: commecors,no-cors,same-origincache: mode de cache pour la requêtecredentialsbody
Consultez la liste complète des options disponibles ici
Exemple d'utilisation : Cet exemple démontre l'utilisation de fetch pour appeler une API et obtenir une liste de dépôts 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))
Pour envoyer une requête POST, voici comment le paramètre method 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();