Fetch()

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

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 fonctionne sur le même principe. Vous lui donnez l’adresse URL où se trouve ce que vous désirez et 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).

• .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).

Exemple

CodePen | smnarnold 👀

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

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

fetch('https://ex.smnarnold.com/json/acteurs/ryan-reynolds.json') 
  .then(actor => actor.json()) 
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  })