Discussion :

[Daïmanu]

Bonjour.

Je travaille sur un bot Discord avec discord.js, et ce dernier utilise les Promises.
Je découvre donc les mots-clés await et async, et j'ai écrit ce code (log() étant un wrapper de console.log()) :

Code js :

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
function registerGuild(guild) {
    let Promise1 = guild.members.fetch(userId);
    let Promise2 = guild.roles.fetch();
 
    log(1);
    let promiseExecution = async () => {
        log(3);
        let promise = await Promise.all([Promise1, Promise2]);
        log(4);
        return promise;
    }
    log(2);
    promiseExecution()
        .then(data => {/**/})
        .catch(console.error);
    log(5);
}

Je m'attends à voir 1 2 3 4 5, mais je vois 1 2 3 5. Et effectivement c'est comme si la fonction s'arrête subitement à la ligne 8. Pourtant le log(5) est bien executé.

Je dois rater quelque chose mais je comprends pas.

[Doksuri]

le mot-clef "await" pourrait se traduire en francais par "attend"
donc ta ligne 8 "attend" que Promise1 et Promise2 se resolvent pour continuer.

il se peut que Promise1 ou Promise2 ne reponde pas... et c'est pour ca que tu ne vois pas ton log 4

[Daïmanu]

le mot-clef "await" pourrait se traduire en francais par "attend"

C'est bien ça qui me contrarie, je pensais que le mot-clé await faisait que la fonction promiseExection() attende que les deux Promise soient résolues, mais ça n'est pas le cas. Et je n'ai pas de message d'erreur.

Cela dit le fait qu'une des Promise ne s'effectue pas correctement est une piste, je vais creuser par là.

[mathieu]

je pensais que le mot-clé await faisait que la fonction promiseExection() attende que les deux Promise soient résolues

oui c'est bien ce qu'il se passe, c'est pour ça que le "4" s'affiche plus tard.
par contre, la fonction "registerGuild" démarre seulement la promesse "promiseExection" et n'attend pas la réponse, c'est pour ça que le "5" s'affiche à la suite.

l'utilisation de async et await est juste une autre façon d'utiliser une promesse et "then", regardez cet exemple là :
https://www.developpez.net/forums/d2.../#post11899853

[Daïmanu]

Merci pour le lien, je sentais que j'utilisais mal le then(), ça me simplifie les choses.

Le souci vient visiblement de la fonction appelante, qui était ordinaire (sans await). En rajoutant ce mot-clé, ça attend bien comme je le veux.

En passant de :

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
function registerGuild(guild) {
    let promise1 = guild.members.fetch();
    let promise2 = guild.roles.fetch();
 
    let promiseExecution = async () => {
        return await Promise.all([promise1, promise2]);
    }
 
    promiseExecution()
        .then(data => {/* */})
        .catch(console.error);
}
 
client.on('messageCreate', message => {
    registerGuild(message.guild);
}

À ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
async function registerGuild(guild) {
    let promise1 = guild.members.fetch();
    let promise2 = guild.roles.fetch();
 
    const response = await Promise.all([promise1, promise2]);
    const x = response[0];
    const y = response[1];
    /* */
}
 
client.on('messageCreate', async message => {
    await registerGuild(message.guild);
}

J'ai réussi à faire marcher comme je le voulais, maintenant ce n'est peut-être pas la meilleure manière de faire.
Je vais explorer encore un peu, mais en l'état ça me va.

[mathieu]

dans l'évènement "messageCreate", vous n'attendez pas de valeur en retour donc je pense que vous pouvez simplifier comme cela :

Code javascript :

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

client.on('messageCreate', message => registerGuild(message.guild));

je viens de voir le souci dans votre 1re version du code, quand vous faites return await Promise.all([promise1, promise2]); vous retournez le résultat des 2 promesses et non une nouvelle promesse. regardez dans votre 2e version du code, vous faites la même chose.

[Daïmanu]

dans l'évènement "messageCreate", vous n'attendez pas de valeur en retour donc je pense que vous pouvez simplifier comme cela :

Code javascript :

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

client.on('messageCreate', message => registerGuild(message.guild));

Je ne l'ai pas précisé, mais il y a d'autres instructions dans cette fonction.

je viens de voir le souci dans votre 1re version du code, quand vous faites return await Promise.all([promise1, promise2]); vous retournez le résultat des 2 promesses et non une nouvelle promesse. regardez dans votre 2e version du code, vous faites la même chose.

Comment je fais alors pour attendre que les deux promesses soient terminées, pour passer à un mode synchrone ?

[NoSmoking]

Bonjour,

Comment je fais alors pour attendre que les deux promesses soient terminées, pour passer à un mode synchrone ?

tu attends que les promesses soient terminées

Plus sérieusement prenons un petit exemple.

Commençons par la déclaration des promises :

Code :

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

1
2
3
4
5
6
7
8
9
10
const promise1 = new Promise((resolve, reject) => {
  resolve("first");
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(()=> resolve("second"), 1000);   // avec retard
});
const promise3 = new Promise((resolve, reject) => {
  resolve("third");
});
const promise4 = "etc ...";

Nota : une promesse est crée avec un retard pour montrer qu'au final les retours seront bien dans l'ordre d'appel.

Rappel : si une des promesses échoue la promesse Promise.all échoue.

Créons une fonction d'appel pour résoudre celles-ci :

Code :

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

1
2
3
4
5
6
7
function getResultat() {
  Promise.all([promise1, promise2, promise3, promise4])
    .then((response) => {
      // ici toutes les données sont disponibles dans l'ordre d'appel
      console.log("In promise :", response);
    });
}

... les données sont traitées directement dans le then().

On peut également traiter les réponses directement dans le then() en passant par une fonction de rappel, callback.

Code :

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

1
2
3
4
5
6
7
function getResultat(callback) {
  Promise.all([promise1, promise2, promise3, promise4])
    .then((response) => {
      // ici toutes les données sont disponibles dans l'ordre d'appel
      callback && callback(response);
    });
}

... cela permet souvent d'avoir un code plus lisible.

Avec une fonction callback, l'appel pourrait ressembler à :

Code :

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

1
2
3
4
5
6
console.log("(1) Avant");
getResultat((data) => {
  console.log("getResultat :", data);
  // ou tout autre fonction
});
console.log("(2) Après");

Le résultat obtenu sera :

Code :

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

1
2
3
> "(1) Avant"
> "(2) Après"
> "getResultat :" Array ["first", "second", "third", "etc ..."]

Maintenant on pourrait envisager de traiter les données en retour de promesse, dans ce cas c'est une promesse qui est retournée, il nous faut donc utiliser le résultat dans le then().

Créons une fonction d'appel pour résoudre celles-ci :

Code :

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

1
2
3
function getResultat() {
  return Promise.all([promise1, promise2, promise3, promise4]);
}

Le traitement se fera dans le then() de la fonction getResultat(), qui est une promesse.

Code :

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

1
2
3
4
5
6
7
console.log("(1) Avant");
getResultat()             // appel de la fonction
  .then((data) => {       // traitement dans le then
    // ici toutes les données sont disponibles dans l'ordre d'appel
    console.log("Out promise :", data);
  })
console.log("(2) Après");

Le résultat sera le même que précédemment :

Code :

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

1
2
3
> "(1) Avant"
> "(2) Après"
> "Out promise :" Array ["first", "second", "third", "etc ..."]

Une autre façon de voir les choses avec le couple async/await serait cette forme par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
async function getResultat() {
  const response = await Promise.all([promise1, promise2, promise3, promise4]);
   // ici toutes les données sont disponibles dans l'ordre d'appel
  console.log("await :", response);
}
 
// appel à la fonction
console.log("(1) Avant");
getResultat();
console.log("(2) Après");

et toujours le même ordre dans la console :

Code :

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

1
2
3
> "(1) Avant"
> "(2) Après"
> "await :" Array ["first", "second", "third", "etc ..."]

Tu vois que tu as l’embarras du choix quant à la façon d'implémenter ton code