Fetch API

Le Fetch API va chercher une ressource se trouvant sur un serveur et la ramène afin de pouvoir la manipuler.

Quelques utilisations classiques

Un formulaire web qui envoie des données

Envoyer des données d'un formulaire qu'un utilisateur vient de remplir à l'écran via un Fetch avec requête POST, sans recharger la page en cours.

Une composante d'une interface

Via un Fetch, une requête à un serveur externe peut-être faite de manière asyncrore et le contenu correspondant appraitra dans l'interface déjà présente lorsque le serveur distant aura eu le temps de répondre.

Par exemple, on peut penser à une application qui affiche la météo. Celle-ci utilisera un Fetch pour appeler une API comme OpenWeatherMap.

Dans une application web: Simple Page Application (SPA)

Source du graphique: Tech-Stack Single File App

Quelques exemples d'applications web SPA, les interfaces de: Gmail, Google Maps, Facebook, GitHub.

La métaphore d'un Fetch API

Imaginez un assistant que vous envoyez récupérer une commande 📦. Vous lui donnez l’adresse 🏭 où se trouve le colis et vous devez ensuite attendre qu’il revienne avec celui-ci . À son retour, vous lui dites qu’il s’agit de fleurs 🌺🌹. Votre assistant entreprend donc d’ouvrir le colis 📦 et de les mettre dans l’eau pour vous 💐. Dès qu’il termine, vous obtenez votre bouquet et vous pouvez en faire ce que bon vous semble.

Fetch API

Fetch fonctionne sur le même principe.
- Vous lui donnez : l’adresse URL où se trouve
- et ce que vous désirez (quoi)
- vous devez ensuite attendre qu’il revienne avec les données trouvées.

À son retour, vous lui spécifiez le type de fichier qu’il est allé chercher afin qu’il les convertisse dans le format désiré (JSON, image, etc.). Dès qu’il termine, vous obtenez votre fichier et vous pouvez en faire ce que bon vous semble.

Examinons la structure de base d'une requête au fetch API:

fetch(url) // L'adresse URL des données à aller chercher .then(data => { // Attendre que les données soient reçues // Convertir les données au format désiré }) .then(result => { // Attendre que les données soient converties // Faire du résultat ce que bon vous semble });

Par défaut, le fetch API utilise la méthode GET, ce qui nous permet de simplement déclarer l'url de la ressource que nous désirons obtenir.

Par exemple: fetch("https://ex.smnarnold.com/json/acteurs/ryan-reynolds.json") .then(data => data.json()) .then(actor => { console.log(actor); }); Anatomie

Dans l'exemple précédente ☝️, nous avons:

  • fetch(...) déclarant que fetch doit aller chercher le fichier à l'adresse fournie entre parenthèses et nous retourner une promesse.

  • .then() ou en français "ensuite" attend que le serveur tienne sa promesse et nous réponde.

  • data nom donné à l'objet retourné par fetch (ce nom est arbitraire, donc vous le nommez comme vous le souhaitez, dépendant de la valeur que vous allez chercher).

  • .json() indique que nous souhaitons appeler la méthode .json() de l'objet response, afin de convertir les données en JSON.

  • .then() attend que la promesse de conversion des données soit respectée.

  • actor correspond au nom donné au JSON reçu. (Encore une fois, ce nom est arbitraire, donc vous le nommez comme vous le souhaitez, dépendant de la valeur que vous allez chercher).

Exemple

See the Pen Grid - grid-template-area by TIM Montmorency (@tim-momo) on CodePen.

Conversion de réponses

.blob() converti la réponse en blob (utile pour les images)
.text() converti la réponse en texte (utile pour le XML)
.json() converti la réponse en JSON

Dans la majorité des cas, nous utiliserons la méthode .json()

>> EXERCICE 1 FOURNI EN CLASSE.

Catch

La méthode .catch permet d'indiquer quoi faire si le serveur ne répond pas ou s'il prend trop de temps à répondre.

Par exemple:

fetch(url) // L'url de la ressource à aller chercher .then(() => { // Attendre que la ressource soit reçue, et ensuite (then) // Traiter la ressource }) .catch(() => { // Oh, oh le serveur ne répond pas // Activer le plan B });

>> EXERCICE 2 FOURNI EN CLASSE.

Outils utiles
OUTIL Public APIs Collection d’API public pour récupérer des informations sur divers sujets.
OUTIL {JSON} Placeholder Outils offrant un API gratuit en ligne à des fins de tests et de prototypes.