La méthode Fetch() en Javascript : Introduction et mis en pratique

Un peu de théorie avant de créer notre premier projet pour récupérer et manipuler des données avec des API.

La méthode fetch()

Fetch est une méthode globale qui va nous permettre de contacter un serveur afin de récupérer des ressources.

En premier paramètre, dans les parenthèses, la méthode fetch() prend un argument, l'url du serveur suivi avec le slash de la ressource qu'on va utiliser.
Par défaut la requête http sera de type GET. On récupère des données du serveur.
Fetch va nous retourner une promesse qu'on va pouvoir exploiter.
La promesse va se résoudre dans un objet response.

Les promesses
En Javascript, le navigateur exécute le programme ligne par ligne. On dit qu'il s'exécute de manière synchrone.
Avec les promesses, on exécute le thread (ligne) principal et les promesses s'exécuteront quand elles le peuvent.

Qu'est-ce qu'une API ?
Une API ou Interface de Programmation Applicative (Application Programming Interface en anglais), est une interface qui va permettre à une application de se connecter à un service.
Les API sont utilisées pour permettre l'intégration et l'interaction entre différentes applications, services ou systèmes.

Syntaxe

Nous allons voir ici les deux syntaxes que vous serez amené à rencontrer avec la méthode fetch() : then() et plus récemment async/await.
Un peu de théorie ici, et nous passerons ensuite à la pratique avec de réels url pour récupérer des données via des API.

1 / Voici un exemple de code qui utilise la méthode fetch() pour récupérer des données JSON à partir d'une API avec then() :

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))

Nous utilisons la méthode fetch() en lui passant l'URL de l'API en tant que paramètre. Dans cet exemple, l'URL  est 'https://api.example.com/data'.
Cela envoie une requête à l'API pour récupérer les données.
La méthode fetch() renvoie une promesse qui, une fois résolue, renvoie un objet Response représentant la réponse du serveur.

Ensuite, nous appelons la méthode .json() sur l'objet Response pour extraire les données JSON de la réponse. Cette méthode renvoie également une promesse qui, une fois résolue, renvoie les données sous forme d'objet JavaScript.

Nous utilisons ensuite une autre fonction .then() pour manipuler les données JSON. Dans cet exemple, nous utilisons simplement console.log(data) pour afficher les données dans la console du navigateur, mais vous pouvez faire tout ce que vous souhaitez avec ces données à cet endroit.

Notez que fetch() est asynchrone, ce qui signifie qu'il n'interrompt pas l'exécution du reste du code. C'est pourquoi nous utilisons des promesses (.then()) pour traiter les résultats de la requête une fois qu'ils sont disponibles.

2/ async / await

Avec l'utilisation de await et fetch(), vous pouvez simplifier la syntaxe et rendre le code plus lisible en évitant les chaînes de promesses.
Voici un exemple d'utilisation de await avec fetch() pour récupérer des données JSON à partir d'une API :

async function getData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();

// Manipulation des données JSON ici
console.log(data);
} catch (error) {
// Gestion des erreurs
console.log('Une erreur s\'est produite :', error);
}
}

getData();

Explications du code ligne par ligne :

Nous définissons une fonction getData() avec le mot-clé async qui nous permet d'utiliser await à l'intérieur de cette fonction.

À l'intérieur de la fonction getData(), nous utilisons await pour attendre que la promesse renvoyée par fetch() soit résolue. La réponse du serveur est stockée dans la variable response.

Ensuite, nous utilisons await pour attendre que la promesse renvoyée par response.json() soit résolue. Cela nous donne les données JSON sous forme d'objet JavaScript, stockées dans la variable data.

Nous pouvons ensuite manipuler les données JSON à cet endroit du code. Dans cet exemple, nous utilisons console.log(data) pour afficher les données dans la console.

Si une erreur se produit dans le bloc try, l'exécution est interrompue et le flux est transféré au bloc catch. L'erreur est capturée et affichée dans la console.

Les fonctions fléchées
Pour en terminer sur la syntaxe, nous allons reprendre l'exemple précédent mais maintenant avec une fonction fléchée. Les fonctions fléchées étant couramment utilisées aujourd'hui.

const getData = async () => {

try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// Manipulation des données JSON ici
console.log(data);

} catch (error) {
// Gestion des erreurs
console.log('Une erreur s\'est produite :', error);
}
};

getData();

Passons à la pratique dans le tutoriel suivant avec plusieurs exemples et nous allons ensuite mettre en place un projet pour récupérer des données d'une API et les filtrer.