Ja­vaS­cript Fetch : une méthode native pour des requêtes API efficaces

Ja­vaS­cript 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 Ja­vaS­cript fetch et à quoi sert-elle ?

Ja­vaS­cript fetch est un moyen de faire des requêtes API avec des Promises. Ce type d’in­te­rac­tion évite que le code ne devienne confus et propose en plus de nom­breuses autres fonctions. Ja­vaS­cript fetch envoie une requête à un serveur souhaité et l’exécute en arrière-plan. Nous vous ex­pli­quons dans les pa­ra­graphes suivants son fonc­tion­ne­ment ainsi que les pos­si­bi­li­tés que l’API fetch vous offre.

Les avantages d’un objet Promise

Pour pouvoir com­prendre le fonc­tion­ne­ment de Ja­vaS­cript fetch, il est né­ces­saire de jeter un coup d’œil sur les objets Promise. Les Promises, qui ont été in­tro­duites avec Ja­vaS­cript ES6, doivent permettre ou faciliter le dé­rou­le­ment d’opé­ra­tions asyn­chrones. Comme son nom l’indique, un objet Promise est une sorte de promesse : si celle-ci est remplie en faisant fonc­tion­ner 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 rem­pla­ce­ment ou com­plé­ment d’un callback, les Promises per­met­tent une gestion asyn­chrone plus fluide et amé­lio­rent la clarté du code.

Les Promises peuvent avoir les états « pending » (en attente), « fulfilled » (sa­tis­faite) 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(). Ja­vaS­cript fetch se sert de ces pos­si­bi­li­tés et utilise les Promises pour exécuter une requête XHR vers un serveur.

Fonc­tion­ne­ment de Ja­vaS­cript fetch

La syntaxe de base de Ja­vaS­cript 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 guil­le­mets entre les deux pa­ren­thèses. D’autre part, un objet avec des options, qui est toutefois optionnel. Il est utilisé à la suite de l’ins­truc­tion pro­pre­ment dite.

Pour mieux illustrer le fonc­tion­ne­ment et la structure, nous utilisons l’exemple de code suivant :

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

Dans la première étape, nous spé­ci­fions 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é­ces­saire 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 pro­dui­sent. 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 éven­tua­li­tés et pouvez initier des requêtes API avec Ja­vaS­cript fetch.

Requêtes GET avec Ja­vaS­cript fetch

Vous pouvez utiliser Ja­vaS­cript fetch pour récupérer des données d’une API. Dans l’exemple suivant, nous ef­fec­tuons une requête GET. Il s’agit du réglage standard de Ja­vaS­cript fetch. Pour cela, nous prenons à nouveau un exemple d’URL. Celle-ci répondra par une Promise à laquelle nous ap­pli­que­rons la méthode then(). Nous con­ver­tis­sons 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 res­sem­bler à 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é­ra­tions POST avec Ja­vaS­cript 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 obli­ga­toires : 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 ca­rac­tè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 choi­sis­sons 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 cor­res­pon­dant res­sem­ble­rait à 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 com­plè­te­ment actualisé, ce qui est également possible avec Ja­vaS­cript 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 Ja­vaS­cript fetch pour supprimer un objet, vous pouvez utiliser une requête DELETE. Si né­ces­saire, vous pouvez aussi utiliser la méthode then(). Voici un exemple cor­res­pon­dant :

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