Fetch

3

Le Fetch API va chercher une ressource se trouvant sur un autre serveur et nous la ramène afin que l'on puisse y accéder.

Si vous avez déjà joué à "va chercher" avec un chien, ou en anglais à "fetch", vous comprenez déjà un peu le principe de base du Fetch API.

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

fetch(url) // L'url de la ressource à aller chercher
.then(() => { // Attendre que la ressource soit reçue
  // Traiter la ressource
})
.catch(() => {
  // Quoi faire si le serveur retourne une erreur
});

Get

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(function(response) {
  return response.json();
})
.then(function(data) {
  console.log(data);
})
.catch(function(error) {
  console.log('Une erreur est survenue')
})

ou l'équivalent en fonction fléchée:

fetch('https://ex.smnarnold.com/json/acteurs/ryan-reynolds.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log('Une erreur est survenue'));

Remarquez comment avec la fonction fléchée le mot clé return n'est pas nécessaire puisque le retour est implicite.

Dans cet exemple, nous avons:

  • fetch(...) déclarant que fecth API 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.
  • response nom donné à l'objet retourné par fetch (ce nom est arbitraire).
  • return indique qu'un élément sera retourné à un prochain .then

return est nécessaire avec une fonction classique.
🚫 avec une fonction fléchée.

  • .json() indique que nous souhaitons appeler la méthode .json() de l'objet response, afin de convertir son contenu en JSON.
  • .then attend que la promesse de conversion du contenu soit respectée.
  • data correspond au nom donné au JSON reçu. (Encore une fois, ce nom est arbitraire).

Exemples

Exercice d'interface Zoom 👨‍👩‍👧‍👦

Post

Similaire à la méthode GET, la méthode POST se différencie par la présence d'un deuxième paramètre sous forme d'un objet JavaScript après l'url.

L'utilisation d'un objet, nous permet de ne pas exposer directement dans l'url certaines informations plus sensibles. Par exemple, une clé d'identification.

Par exemple:

const token = '123456';
const request = { ... }

const settings = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': 'Bearer ' + token,
  },
  body: JSON.stringify({ query: request })
}

fetch(url, settings)
.then(() => {
    // Traiter la ressource
})
.catch(() => {
    // Indique quoi faire si le serveur retourne une erreur
});

Voir le CodePen de Simon Arnold (@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

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

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme