Class poo : Requête AJAX avec les promises

Version imprimable

Bonjour,

J'ai créé une class et j'aimerais quel me retourne le résultat d'une requête juste en lui passant une URL sauf que je me retrouve avec un Promise{<pending>} en retour. Mais le Promise pending m'indique bien que ma promise est "resolved" et qu'en valeur j'aie bien un objet. Merci d'avance pour ceux qui pourront m'éclairer.

Code:

1
2
3
4
 
const request = new Request("Mon URL");
const myResponse = request.getRequestWithPromise();
console.log(myResponse);

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
export class Request{
    constructor(url) {
        this.url = url;
    } 
    getRequestWithPromise() {
        const url = this.url;
        const promise = new Promise(function(resolve, reject) {
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
                    resolve(this.response); 
                }
            };
            xhr.open("GET", url);
            xhr.responseType = "json";
            xhr.send();
        });
        return promise.then(function(value) {
            let object = value;
            return object;
        });
    }   
}

Bonjour,
bienvenue dans le monde le l'asynchrone ;)

Tu n'obtiendra pas le résultat en direct, même en écrivant le code que tu as mis.

Tu auras en retour quoiqu'il arrive une promise et il suffit de chaîner avec la méthode .then() pour récupérer le résultat.
Code:

1 2 3 4 const request = new Request("Mon URL"); const myResponse = request.getRequestWithPromise(); myResponse .then((result) => console.log("result :",result))
avec simplement ta déclaration comme suit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 getRequestWithPromise() { const url = this.url; const promise = new Promise(function (resolve, reject) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (this.readyState == XMLHttpRequest.DONE && this.status == 200) { resolve(this.response); } }; xhr.open("GET", url); xhr.responseType = "json"; xhr.send(); }); return promise; }
Place des console.log() dans ton code pour bien visualiser l'ordre des retours.

Maintenant tu peux utiliser une fonction de rappel pour t'afficher le résultat
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 getRequestWithPromise(callback) { const url = this.url; const promise = new Promise(function (resolve, reject) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (this.readyState == XMLHttpRequest.DONE && this.status == 200) { resolve(this.response); } }; xhr.open("GET", url); xhr.responseType = "json"; xhr.send(); }) .then((result) => callback ? callback(result) : console.log("result :", result)) return promise; }
en ayant définie une fonction comme :
Code:

1 2 3 function fctCallBack (data){ console.log("data :",data) }
et un appel :

Code:

request.getRequestWithPromise(fctCallBack);

ainsi tu pourras traiter tes données dans la fonction fctCallBack.

• L'objet Promise, mais tu as déjà du lire !

Nota : pour simplifier ton code tu pourrais t’appuyer sur l'API Fetch

09/05/2020, 12h14
Smlh.dev

merci pour ta réponse bien expliqué je comprends mieux. :ccool: