[Résolu] Promise et AJAX

24 Apr 2016 à 17:41

Hello !

Je suis en train d'expérimenter un peu avec les nouvelles fonctionnalités d'ES6, dont les Promise.
Je suis tombé sur un comportement bizarre et je ne sais pas si c'est un bug ou un comportement normal (ou alors, j'ai pas entièrement pigé les Promise). Voilà mon code simplifié :

function xhr(method, url, params) {
    return new Promise(function(resolve, reject) {
        let xhr = new XMLHttpRequest();
        //...
        xhr.open(method, url, false);
        xhr.send(null);
       
        if (xhr.status == 200) {
            resolve(xhr.responseText);
        } else {
            reject("Erreur");
        }
    }
}

//...

xhr("GET", "/test/blabla", [])
  .then((res) => console.log(res))
  .catch(() => console.log("Ereur")

console.log("TEST");

D'après ce que j'ai compris des Promise, même si la requête AJAX est ici synchrone, la fonction xhr en elle même est censée être asynchrone. Or, cette dernière bloque l'exécution du code.

Du coup, qu'est-ce que j'ai mal compris Smiley biggol

? Est-ce un bug ? (Testé dans Edge)
Modifié par Bguigui67 (24 Apr 2016 - 18:54)

GuillaumeBauer

24 Apr 2016 à 18:54

En fait, après mûre réflexion (et accessoirement après avoir arrêté de croire en la magie), je me suis rendu compte que mon exemple ne pouvait pas fonctionner comme je l'entendais. Il faut forcément faire l'appel AJAX de manière asynchrone. La version juste serait :

function xhr(method, url, params) {
    return new Promise(resolve, reject) {

        function xhrCallback() {
            if (xhr.status == 200) {
                resolve(xhr.responseText);
            } else {
                reject("Erreur");
            }
        }

        let xhr = new XMLHttpRequest();
        //...

        xhr.onload = xhrCallback;
    }
}

JavaScript, DOM et API Web HTML5

[Résolu] Promise et AJAX