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