<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>