Promesses et Fetch

Démonstration de l'utilisation des Promesses et de Fetch

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>Démo Fetch() et Promise</title>
  </head>

  <body>
<h1>
 Démo Fetch() et Promise
</h1>
<p>
...pour compléter les exemples de Mozilla
</p>
<section>
  <p>
  Promesses ou "Promise" engendre la notion de traitements <b>"Asynchrones"</b>.
  </p>

  <h2>La promesse est disponible :</h2>

  <ul>
  <li>Maintenant</li>
  <li>Bientôt</li>
  <li>Jamais</li>
  </ul>

  <h2>
  Et peut donc se retrouver dans l'un des 3 états :
  </h2>
  <ul>
  <li>En attente (Pending)</li>
  <li>Réussie (Fulfilled)</li>
  <li>Echoue (rejected)</li>
  </ul>

En général, on trouve le <b>resolve</b> et le <b>reject</b>...<br/>
<dl>
<dt>Promise</dt>
<dd>Une promesse est un objet qui est renvoyé et auquel
on attache des callbacks plutôt que de passer des callbacks à une fonction.
Ainsi, au lieu d'avoir une fonction qui prend deux callbacks en arguments.</dd>
<dt>Callback</dt>
<dd>Les callbacks sont juste des fonctions de rappel, soit des fonctions utilisées 
comme argument dans une autre fonction. Elles sont généralement définies à l'extérieur.</dd>

</dl>

<p>
Le principe est le suivant : Par exemple, dans la gestion des événements en HTML (boutons, select,...).<br>
Dans ce cas, un événement peut être un clic de souris qui provoque l’exécution de la fonction de rappel..<br>
C’est le "callback" lui-même qui se chargera d’une éventuelle redirection vers une autre page ou autre..<br>
</p>
<p>
Soit : une fonction normale est appelée directement, tandis qu'une fonction de rappel est définie au départ et n’est appelée et exécutée que lorsqu’un type d'événement se produit... comme dans le <code>.addEventListener("click", function() { ... }, false);</code>
 </p>
  
</section>
<article>
  <fieldset>
       <legend>Sélectionnez un...

CSS

body {
  
  background-color: ;
}

JavaScript

/*
Démonstration de l'utilisation des promesses
pour compléter les exemples de Mozilla

Promesses ou "Promise" engendre la notion de traitements "Asynchrones"

Donc, soit la promesse est disponible :

- Maintenant
- Bientôt
- Jamais

Et peut se retrouver dans l'un des 3 états :

- En attente (Pending)
- Réussie (Fulfilled)
- Echoue (rejected)

En général, on trouve le resolve et le reject...

sur developer.mozilla il est dit ceci :

"Une promesse est un objet qui est renvoyé et auquel
on attache des callbacks plutôt que de passer des callbacks à une fonction.
Ainsi, au lieu d'avoir une fonction qui prend deux callbacks en arguments".

Les callbacks sont juste des fonctions de rappel, soit des fonctions utilisées 
comme argument dans une autre fonction. Elles sont généralement définies à l'extérieur.

Le principe est le suivant : Par exemple, dans la gestion des événements en HTML (boutons, select,...).
Dans ce cas, un événement peut être un clic de souris qui provoque l’exécution de la fonction de rappel.
C’est le "callback" lui-même qui se chargera d’une éventuelle redirection vers une autre page ou autre.

Soit : une fonction normale est appelée directement, tandis qu'une fonction de rappel est définie au départ et n’est appelée et exécutée que lorsqu’un type d'événement se produit... comme dans le .addEventListener("click", function() { ... }, false);

La fonction ci-dessous renvoie un objet Promise.

*/

function nombrePaire(nombre) {

		// retourne une promesse avec 2 fonctions pour arguments :
    // (resolve, reject) 
    return new Promise( (resolve, reject) => {

    	console.log("Promise réalisée avec "+nombre);
    
      if (nombre % 2 === 0)
      {
         callBackOK("Nombre pair");
      }
      else
      {
          callBackKO("Nombre impair");
      }
      });
}

const promesse = nombrePaire(23);
//promesse.then(callbackOK, callBackKO);

function callBackOK(reussite) { console.log("Succès : "+reussite);}

function callBackKO(echec) {...