Script promise : Ajax transformé en Promise

Edition 2 | Chapitre 15 : Traitements asynchrones avec Promise / Page 248

Edition 3 | Chapitre 15 : Traitements asynchrones avec Promise / Page 248

<html>
<head><title>Promise : Transformation d'un appel AJAX en Promise</title>
</head> 
<body>
<h1>Promise : Transformation d'un appel AJAX en Promise</h1>
<p><input type="button" onclick="testAjaxIP()" value="AJAX sur /api/get-my-ip.php">
<p><input type="button" onclick="testAjax404()" value="AJAX sur une page 404">
<p><input type="button" onclick="testAjaxJSON()" value="AJAX retour JSON">
<p><input type="button" onclick="testAjaxJSONError()" value="AJAX retour JSON en erreur">
<script type="text/javascript">
/* ajaxP est une fonction d'appel AJAX sous forme de promesse */
function ajaxP(url) {console.log("ajaxP('"+url+"')");var p = new Promise( function(resolved, rejected) { var ajax = new XMLHttpRequest(); ajax.open("GET", url, true);ajax.timeout = 2000; // en millisecondesajax.onload = function() {if (this.status==200) { /* retour HTTP OK *//* On envoie le contenu AJAX dans la fonction resolved */resolved(this.response);} else { /* Code retour HTTP en erreur */rejected("Erreur HTTP n°"+this.status+" : "+this.statusText);}}ajax.ontimeout = function() { rejected("Erreur timeout"); }ajax.onerror = function() { rejected("Erreur réseau"); }ajax.send();}); return p; /* La fonction retourne p de type Promise */
}
function testAjaxIP() {ajaxP("https://www.toutjavascript.com/api/get-my-ip.php").then(reponse => console.log(reponse)).catch(raison => console.log(raison));
}
function testAjax404() {ajaxP("/api/404.php").then(reponse => console.log(reponse)).catch(raison => console.log(raison));
}
function testAjaxJSON() {ajaxP("https://www.toutjavascript.com/api/get-json.php").then(reponse => JSON.parse(reponse)).then(reponse => console.log(reponse)).catch(raison => console.log(raison));
}
function testAjaxJSONError() {ajaxP("https://www.toutjavascript.com/api/get-my-ip.php").then(reponse => JSON.parse(reponse)).then(reponse => console.log(reponse)).catch(raison => console.log(raison));
}
</script>
</body>
</html>

Exécution du script

Emulation de la console

Code source

<html><head>    <title>Promise : Transformation d'un appel AJAX en Promise</title></head>    <body><h1>Promise : Transformation d'un appel AJAX en Promise</h1><p><input type="button" onclick="testAjaxIP()" value="AJAX sur /api/get-my-ip.php"><p><input type="button" onclick="testAjax404()" value="AJAX sur une page 404"><p><input type="button" onclick="testAjaxJSON()" value="AJAX retour JSON"><p><input type="button" onclick="testAjaxJSONError()" value="AJAX retour JSON en erreur"><script type="text/javascript">/* ajaxP est une fonction d'appel AJAX sous forme de promesse */function ajaxP(url) {  console.log("ajaxP('"+url+"')");  var p = new Promise( function(resolved, rejected) {     var ajax = new XMLHttpRequest();      ajax.open("GET", url, true);    ajax.timeout = 2000; // en millisecondes    ajax.onload = function() {      if (this.status==200) { /* retour HTTP OK */        /* On envoie le contenu AJAX dans la fonction resolved */        resolved(this.response);      } else { /* Code retour HTTP en erreur */        rejected("Erreur HTTP n°"+this.status+" : "+this.statusText);      }    }    ajax.ontimeout = function() { rejected("Erreur timeout"); }    ajax.onerror   = function() { rejected("Erreur réseau");  }    ajax.send();  });   return p; /* La fonction retourne p de type Promise */}function testAjaxIP() {  ajaxP("https://www.toutjavascript.com/api/get-my-ip.php")   .then(reponse => console.log(reponse))   .catch(raison => console.log(raison));}function testAjax404() {  ajaxP("/api/404.php")   .then(reponse => console.log(reponse))   .catch(raison => console.log(raison));}function testAjaxJSON() {  ajaxP("https://www.toutjavascript.com/api/get-json.php")   .then(reponse => JSON.parse(reponse))   .then(reponse => console.log(reponse))   .catch(raison => console.log(raison));}function testAjaxJSONError() {  ajaxP("https://www.toutjavascript.com/api/get-my-ip.php")   .then(reponse => JSON.parse(reponse))   .then(reponse => console.log(reponse))   .catch(raison => console.log(raison));}</script></body></html>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...