javascript promise

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&eacute;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

     

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

forty nine − forty eight =