Pourquoi mon délai d'attente attend-il la fin de l'attente, alors que mon journal ne l'attend pas ?

Question

Si j'ai quelque chose comme ça :

<-- language : lang-javascript -->

console.clear();

// noprotect

const fetchSomething = () => new Promise((resolve) => {
    setTimeout(() => resolve('future value'), 500);
});

async function asyncFunction() {
    const result = await fetchSomething();
    console.log('waiting');
    setTimeout(()=>console.log('waiting?'), 250);
    return result + ' 2';
}

asyncFunction().then(result => console.log(result));

Et mon résultat ressemble à ceci :

"waiting"
"future value 2"
"waiting?"

Je m'attends à ce que la waiting? à exécuter avant que le résultat ne soit terminé, mais pour une raison quelconque, il attend la fonction. Qu'est-ce qui fait que l'une attend et que l'autre s'exécute ?

Answer 1

C'est une caractéristique de la programmation asynchrone.

Vous devez ajouter await et enveloppez votre setTimeout(()=>console.log('waiting?'), 250); avec une fonction qui renvoie Promise afin de donner l'impression qu'elle a été évaluée en continu.

Quelque chose comme :

await ((ms) =>{
        console.log('waiting?');
        return new Promise(resolve => setTimeout(resolve, ms));
    })(250);

Ou bien :

await (() => new Promise(resolve => setTimeout(()=>{
    console.log('waiting?');
    resolve();
}, 250)))();

Attention, JS a un moteur d'exécution à fil unique, qui interrompt donc l'évaluation lorsque le script original arrive à son terme.

Et la fonction dans setTimeout(function, timeout) est évaluée par la JS lorsqu'elle a une première chance et que le moment est propice.

Votre fonction a donc été interrompue deux fois et a repris deux fois.

Answer 2

L'appel à l'enregistrement "waiting ?" est lancé par un setTimeout après la await est terminée, donc après les 500 ms dans fetchSomething sont déjà passées. Il ne s'exécutera que 250 ms après fetchSomething est de retour. C'est un délai suffisant pour asyncFunction pour revenir.

Si vous voulez voir un comportement différent, démarrez le timer pour enregistrer "waiting ?" avant d'appeler await :

async function asyncFunction() {
  setTimeout(()=>console.log('waiting?'), 250);
  const result = await fetchSomething();
  console.log('waiting');
  return result + ' 2';
}