# 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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/quest-ce-quune-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.

Conseil L’utilisation parfaite de GitHub : avec [Deploy Now](https://www.ionos.fr/hebergement/deploy-now "Deploy Now » Déployez vos projets via GitHub | IONOS") de IONOS, vous déployez directement les modifications du code et pouvez suivre les ajustements en temps réel. Choisissez le tarif le plus adapté à vos besoins !

## Fonctionnement de JavaScript `fetch`

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

```javascript
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 :

```javascript
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 :

```javascript
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 :

```javascript
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 :

```javascript
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 :

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

Conseil Dans notre Digital Guide, vous trouverez de nombreux autres articles sur le célèbre langage de script. Vous y trouverez par exemple les [frameworks et bibliothèques les plus populaires pour JavaScript](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/frameworks-et-bibliotheques-javascript-populaires/).


This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/api-javascript-fetch/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/api-javascript-fetch/) for AI/LLM consumption.