La méthode fetch() permet de récupérer des ressources à travers le réseau de manière asynchrone.

Elle utilise les "promise". La réponse au "fetch" est un objet stream, sur lequel on peut appeler les méthodes json() ou text() qui retournent eux-même une promesse.

Ex :

fetch("https://www.coopernet.fr/session/token")
  .then(function(response) {
    if (response.status !== 200) { // si ça c'est mal passé
      throw new Error("Le serveur n'a pas répondu correctement");
    } else return response.text(); // renvoie une promesse
  })
  .then(function(data) { // data correspond au retour du résolve (ici deux lignes au dessus)
    console.log("Token récupéré : ", data);
  })
  .catch(error => {console.log("Erreur attrapée : ", error)});

L'image ci-dessous tente d'expliquer comment les données sont passées de puis la méthode "then" vers une autre méthode "then" ou vers une catpure d'erreur (catch).

fetch promise

Un exemple complet

 getUsers = (callbackSuccess, callbackFailed) => {
    // création de la requête
    console.log("Dans getUsers de coopernet.");
    return fetch(this.url_server + "memo/users/", {
      // permet d'accepter les cookies ?
      credentials: "same-origin",
      method: "GET",
      headers: {
        "Content-Type": "application/hal+json",
        "X-CSRF-Token": this.token,
        "Authorization": "Basic " + btoa(this.user.uname + ":" + this.user.upwd) // btoa = encodage en base 64
      }
    })
      .then(response => {
        console.log("data reçues dans getUsers avant json() :", response);
        if (response.status === 200) return response.json();
        else throw new Error("Problème de réponse ", response);
      })
      .then(data => {
        console.log("data reçues dans getTerms :", data);
        if (data) {
          // ajout de la propriété "open" à "false" pour tous les termes de
          // niveau 1
          //data.forEach()
          return data;
        } else {
          throw new Error("Problème de data ", data);
        }
      })
      .catch(error => { console.error("Erreur attrapée dans getUsers", error); });
  };

 

Exercice 1

Utilisez le endpoint de "universities.hipolabs.com" dont voici un exemple :

http://universities.hipolabs.com/search?country=Italy

Partie 1

  • Vous créez un formulaire qui permet de choisir un pays (France, Italie, Espagne, ...)
  • A la validation du formulaire, vous utilisez la méthode "fetch" pour interroger l'API.
  • Vous stockez les résultats dans une variable univs (array).
  • Vous affichez dans l'interface le nombre de résultats.
  • A partir de la vairable "univs", vous créez des instances de University qui affichent les résumés d'université (Nom, site web) dans une grille bootstrap de 4 colonnes. Chaque résultat est entouré d'une bordure avec des arrondis.

Partie 2

Une fois le pays choisi, un autre formulaire apparait et permet de "filtrer" les résultas par nom. Par exemple, si vous entrez "montp", vous ne devriez voir plus que les universistés dont le nom contient "montp".

  • Attention à gérer les majuscules et minuscules et si vous y arrivez, les accents.
  • Faites en sorte que le filtre ne commence qu'après avoir entré au moins 3 caractères
  • Faites en sorte que l'on puisse "revenir" en arrière, c'est à dire par exemple, revenir à "mont" si on a entré "montk"

 

 

Exercice 2

Inscrivez-vous sur https://openweathermap.org/.

Faites un formulaire afin d'écire le nom de la ville dont vous voulez connaître la météo.

Utilisez cette api https://openweathermap.org/api/geocoding-api afin de recevoir la longitude et latitude de la ville.

Récuperez les données de cette api https://openweathermap.org/current et affichez :

  • L'icône.
  • Le nom de la ville.
  • La description du temps en français.
  • Les températures actuelle, minimal et maximal, en celsius.