Méthode pour exécuter du code asynchrone
<button name="button" onClick="testPromise();">Click me</button> <div id="log"></div> <script> $('#message1').html('promise page chargée') 'use strict'; var comptePromesse = 0; function testPromise() { var thisComptePromesse = ++comptePromesse; var log = document.getElementById('log'); log.insertAdjacentHTML('beforeend', thisComptePromesse + ') Started (<small>Debut du code synchrone</small>)<br/>'); // on crée une nouvelle promesse : var p1 = new Promise( // La fonction de résolution est appelée avec la capacité de // tenir ou de rompre la promesse function(resolve, reject) { var tst; log.insertAdjacentHTML('beforeend', thisComptePromesse + ') Promise started (<small>Debut du code asynchrone</small>)<br/>'); // Voici un exemple simple pour créer un code asynchrone /*window.setTimeout( function() { // On tient la promesse ! resolve(thisComptePromesse+'aaaaaa'); }, Math.random() * 2000 + 1000 );*/ // un autre exemple tst=Math.random(); if(tst>0.5){resolve('OKOKOKOK');}else{reject('NONONONONO');} //resolve('OK'); } ); // On définit ce qui se passe quand la promesse est tenue // et ce qu'on appelle (uniquement) dans ce cas // La méthode catch() définit le traitement à effectuer // quand la promesse est rompue. p1.then( // On affiche un message avec la valeur function(val) { log.insertAdjacentHTML('beforeend', val +') Promise fulfilled (<small>Fin du code asynchrone</small>)<br/>'); } ).catch( // Promesse rejetée function(val) { //console.log("promesse rompue"+val); log.insertAdjacentHTML('beforeend', val +') Promise rompue (<small>Fin du code asynchrone</small>)<br/>'); } ); log.insertAdjacentHTML('beforeend', thisComptePromesse + ') Promise made (<small>Fin du code synchrone</small>)<br/>'); } </script>
Clique sur bouton -> testPromise()
Création objet p1 new Promise -> function(resolve, reject) en asynchrone
p1.then est appelé par resolve(‘truc en retour’)
p1.then().catch() est appelé par reject(‘un autre truc en retour’)
http://www.html5rocks.com/en/tutorials/es6/promises/
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise