Script await : Ajax transformé en Promise avec await et async

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

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

<html>
<head><title>Promise avec await et async</title>
</head> 
<body>
<h1>Promise avec await et async</h1>
<p>Votre adresse IP :</p>
<div id="myIP">Recherche...</div>
<script type="text/javascript">
var promesse = new Promise( function(resolved, rejected) { var ajax = new XMLHttpRequest(); ajax.open("GET", "https://www.toutjavascript.com/api/get-my-ip.php", 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();
}); 
async function ajaxAsync() {var ip = await promesse;console.log(ip);document.getElementById("myIP").innerHTML=ip;
}
ajaxAsync();
</script>
<style type="text/css">
div#myIP {width:200px;text-align: center;padding:10px;font-size:20px;font-weight: bold;border:1px solid #666;border-radius: 4px;background-color: #fff;
}
</style>
</body>
</html>

Exécution du script

Emulation de la console

Code source

<html><head>    <title>Promise avec await et async</title></head>    <body><h1>Promise avec await et async</h1><p>Votre adresse IP :</p><div id="myIP">Recherche...</div>    <script type="text/javascript">var promesse = new Promise( function(resolved, rejected) {   var ajax = new XMLHttpRequest();    ajax.open("GET", "https://www.toutjavascript.com/api/get-my-ip.php", 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();}); async function ajaxAsync() {  var ip = await promesse;  console.log(ip);  document.getElementById("myIP").innerHTML=ip;}ajaxAsync();</script><style type="text/css">div#myIP {  width:200px;  text-align: center;  padding:10px;  font-size:20px;  font-weight: bold;  border:1px solid #666;  border-radius: 4px;  background-color: #fff;}</style></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...