Api Star Wars

Test appel API et promesses...

by philBou

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
   <title>API Star Wars et Promise.all()</title>
  </head>

  <body>
    <h1>
     Démo avec plusieurs promesses, tout ou rien !
    </h1>
    <section id="resultat" style="visibility : hidden;">
    <fieldset>
       <legend>Sélectionnez un personnage de Star Wars</legend>
       <select id="select">
       <option value="0">Aucun</option>
        </select>
    </fieldset>
    <div id="message" style="visibility : hidden;">
    <p>
    Il y a un problème pour remplir la liste déroulante... vérifiez vos requêtes
    </p>
    </div>
    <article>
      <p id="name"></p>
      <p id="poids"></p>
      <p id="taille"></p>
    </article>
   </section>
</body>

</html>

CSS

body {
  background-color: #FFEFD5;
}
p {
  color: red;
  font-weight: bold;
}

article > p {
  color: grey;
  font-weight: bold;
  
}

JavaScript

// déclaration du tableau final
   const personnages = []; // optionnel, juste pour la démonstration
   const section = document.getElementById('resultat');
   const select = document.getElementById('select');
   const message = document.getElementById('message');
   const name = document.getElementById('name');
   const poids = document.getElementById('poids');
   const taille = document.getElementById('taille');
   const API_PEPOLE_URL = "https://swapi.dev/api/people/";
   const selection = document.querySelector('select');
   

 /*
 * Promise est une interface.
 * Promise.all() permet ici, d'attendre la 
 * résolution d'un tableau de plusieurs promesses (promise)
 * en utilisant les méthodes fetch() les unes après las autres
 * avant d'éxecuter les instructions dans le .then().
 * 6 requêtes sont effectuées et le résultat est un 
 * tableau contenant les réponses à ces requêtes.
 * testez ce qui se passe en modifiant l'url d'une requête
 */
 
 // on fait la promesse de retourner une suite de requêtes
 // c'est tout ou rien comme vous pouvez le voir !
  Promise.all(
  [
  fetch("https://swapi.dev/api/people/1/"),
  fetch("https://swapi.dev/api/people/2/"),
  fetch("https://swapi.dev/api/people/3/"),
  fetch("https://swapi.dev/api/people/4/"),
  fetch("https://swapi.dev/api/people/5/"),
  fetch("https://swapi.dev/api/people/6/"),
  ]
  )
  .then(response => {
      // création du tableau
      const promesses = [];
      for (let index = 0; index < response.length; index++) {
          // les éléments sont ajoutés à notre tableau
          promesses.push(response[index].json());
      }
      // retourne le tableau de promesses dans le then suivant
      // avec le paramètre data que l'on peut aussi nommer résultat
      return Promise.all(promesses);
  })
  .then(data =>  {
        // ajout du contenu du tableau des promesses au format Json
        // dans la liste déroulante.
        // on peut aussi tout mettre dans le tableau personnages
        // mis en...