JavaScript Fetch : une méthode native pour des requêtes API efficaces

JavaScript fetch est une méthode native pour envoyer des requêtes API tout en gardant un code clair. En plus des requêtes GET utilisées par défaut, l’API permet également d’envoyer, de modifier ou de supprimer des données.

Qu’est-ce que JavaScript fetch et à quoi sert-elle ?

JavaScript fetch est un moyen de faire des requêtes API avec des Promises. Ce type d’interaction évite que le code ne devienne confus et propose en plus de nombreuses autres fonctions. JavaScript fetch envoie une requête à un serveur souhaité et l’exécute en arrière-plan. Nous vous expliquons dans les paragraphes suivants son fonctionnement ainsi que les possibilités que l’API fetch vous offre.

Les avantages d’un objet Promise

Pour pouvoir comprendre le fonctionnement de JavaScript fetch, il est nécessaire de jeter un coup d’œil sur les objets Promise. Les Promises, qui ont été introduites avec JavaScript ES6, doivent permettre ou faciliter le déroulement d’opérations asynchrones. Comme son nom l’indique, un objet Promise est une sorte de promesse : si celle-ci est remplie en faisant fonctionner le code, on obtient une valeur. Si la promesse ne peut pas être tenue, il y a un objet d’erreur en réponse. En tant que remplacement ou complément d’un callback, les Promises permettent une gestion asynchrone plus fluide et améliorent la clarté du code.

Les Promises peuvent avoir les états « pending » (en attente), « fulfilled » (satisfaite) ou « rejected » (rejetée).

• pending : l’opération n’a pas encore été exécutée ni annulée.
• fulfilled : l’opération a été exécutée avec succès.
• rejected : l’opération a échoué.

Dans le cas de « fulfilled » et « rejected », vous pouvez réagir avec des méthodes comme then() ou catch(). JavaScript fetch se sert de ces possibilités et utilise les Promises pour exécuter une requête XHR vers un serveur.

Fonctionnement de JavaScript fetch

La syntaxe de base de JavaScript fetch est assez simple à expliquer. Elle ressemble à ceci :

fetch()

La méthode peut prendre en compte deux arguments. D’une part, une URL, qui est inscrite avec des guillemets entre les deux parenthèses. D’autre part, un objet avec des options, qui est toutefois optionnel. Il est utilisé à la suite de l’instruction proprement dite.

Pour mieux illustrer le fonctionnement et la structure, nous utilisons l’exemple de code suivant :

fetch(url)
.then(function() {
})
.catch(function() {
});

Dans la première étape, nous spécifions ainsi comme paramètre l’URL de l’API théorique. Vient ensuite la méthode Promise then(), à laquelle on ajoute une fonction. Celle-ci doit être exécutée lorsque la Promise renvoie la variable resolve. resolve est utilisé lorsqu’une action doit être déclarée comme réussie. La fonction de then() contient le code nécessaire pour traiter les données reçues de l’API.

En dessous, nous avons utilisé la méthode catch(). Celle-ci est appelée lorsque la variable reject est retournée. reject est émise si l’API ne peut pas être appelée ou si d’autres erreurs se produisent. Dans ce cas, la fonction est exécutée à l’intérieur de catch(). Ainsi, avec seulement trois lignes, vous êtes préparé à toutes les éventualités et pouvez initier des requêtes API avec JavaScript fetch.

Requêtes GET avec JavaScript fetch

Vous pouvez utiliser JavaScript fetch pour récupérer des données d’une API. Dans l’exemple suivant, nous effectuons une requête GET. Il s’agit du réglage standard de JavaScript fetch. Pour cela, nous prenons à nouveau un exemple d’URL. Celle-ci répondra par une Promise à laquelle nous appliquerons la méthode then(). Nous convertissons ensuite la réponse du serveur en un objet JSON et utilisons à nouveau une méthode then() pour afficher les données ainsi obtenues dans la console. Un code approprié pour cette opération pourrait ressembler à ceci :

fetch("https://exempledurl.com/api")
.then((response) => response.json())
.then((json) => console.log(json));

Envoyer des données avec POST

Même si la requête GET est la norme, il est aussi possible d’effectuer des opérations POST avec JavaScript fetch. Celles-ci sont utilisées pour envoyer des données. Une fois de plus, nous devons d’abord indiquer l’URL souhaitée. Ensuite, nous utilisons la clé method pour définir le type de requête. Dans notre cas, celle-ci a la valeur « POST ». Suivent deux autres clés obligatoires : body et headers.

body définit les données qui doivent être envoyées au serveur. Dans cet exemple, les données envoyées incluent les champs title et body. De plus, nous utilisons JSON.stringify pour convertir les données en une chaîne de caractères. headers est utilisé pour définir le type de données qui doit être envoyé au serveur. Dans notre cas, il doit s’agir de données JSON et nous choisissons le codage standard UTF-8. Les deux clés doivent être définies pour une requête POST. Pour notre exemple ci-dessus, le code correspondant ressemblerait à ceci :

fetch("https://exempledurl.com/api", {
method: "POST",
body: JSON.stringify({
title: "Le titre se trouve ici",
body: "Le contenu se trouve là",
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));

Mettre à jour les objets avec PUT ou PATCH

Avec une requête PUT ou PATCH, un objet peut être complètement actualisé, ce qui est également possible avec JavaScript fetch. L’approche est similaire à l’exemple précédent. Il doit y avoir à nouveau une option body avec chaîne de caractère, ou JSON.stringify. Le type de contenu est indiqué avec application/json. Pour notre exemple, voici le code :

fetch("https://exempledurl.com/api", {
method: "PUT",
body: JSON.stringify({
title: "Le titre se trouve ici",
body: "Le contenu se trouve là",
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));

Au lieu de PUT, vous pouvez aussi utiliser PATCH.

Supprimer des objets avec DELETE

Si vous souhaitez utiliser JavaScript fetch pour supprimer un objet, vous pouvez utiliser une requête DELETE. Si nécessaire, vous pouvez aussi utiliser la méthode then(). Voici un exemple correspondant :

fetch("https://exempledurl.com/api", {
    method: "DELETE"
})
.then(() => {
    element.innerHTML = "Supprimé avec succès";
})
.catch((error) => {
    console.error('Erreur lors de la requête:', error);
});