Discussion :

[Smlh.dev]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
        });
    }   
}

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et un appel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Smlh.dev]

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