Promesses JavaScript et récupération

Promesses

Restaurants

Une promesse en JavaScript n'est qu'une tâche en attente. C'est comme commander de la nourriture au restaurant : lorsque vous passez votre commande, le serveur vous fait une promesse d'apporter la nourriture que vous avez commandée. Une fois la nourriture apportée à table, la promesse a été tenue. Si la nourriture que vous avez commandée ne peut pas être servie parce que la cuisine manque d'un ingrédient clé, vous pouvez alors prendre un repas ailleurs.

Tout cela est asynchrone. Lorsque vous vous asseyez à table, vous discutez peut-être avec un ami ou faites défiler votre téléphone. Vous mettez ce que vous faisiez en pause pour pouvoir donner votre commande au serveur, puis reprenez ce que vous faisiez auparavant.

Les promesses JavaScript fonctionnent de la même manière. Étant donné que JavaScript est monothread, les promesses permettent au moteur JavaScript de passer à d'autres tâches en attendant la fin de certaines opérations.

Javascript

Une promesse est un type spécifique d'objet. Toutes les promesses commencent dans un état en attente. La fonction de rappel à l'intérieur de la promesse, appelée exécuteur, définit quand résoudre ou rejeter la promesse.

Créer une promesse :

const order = new Promise((resolve, reject) => {
  if ( foodDelivered) {
    resolve('eat food');
  } else {
    reject('find another restaurant');
  }
})

Utiliser une promesse

order
  // wait for the asynchronous value to be fulfilled
  .then(value => console.log(value))
  // handle rejection
  .catch(error => console.log(error))
  .finally(() => console.log('all done'));

Aller chercher

fetch est une fonction intégrée en JavaScript qui renvoie une promesse. Il effectue une requête HTTP et vous permet de gérer la réponse de manière asynchrone avec .then() et .catch().

Utiliser fetch()

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))
  .finally(() => console.log('all done');

La pile d'appels et la boucle d'événements

La pile d'appels gère les tâches synchrones, en gardant une trace de l'ordre dans lequel elles s'exécutent. C'est assez simple : les tâches sont exécutées dans l'ordre dans lequel elles sont écrites.

Cependant, les tâches asynchrones sont gérées par la boucle d'événements. La boucle d'événements permet d'exécuter du code asynchrone dans le désordre, permettant au moteur JavaScript de continuer à travailler sur d'autres tâches sans attendre.

Exemple

Comment cela va-t-il s'exécuter ?

console.log("console log first!");
setTimeout( _ => console.log("set timeout second!"), 0);
Promise.resolve().then(() => console.log("promise third"));
console.log("console log last!!!");

Vous pourriez vous attendre à ce qu’il s’exécute dans l’ordre, mais ce n’est pas le cas. La boucle d'événements JavaScript traite ces instructions différemment.
Le résultat est en fait celui-ci :

> console log first!
> console log last!!!
> promise third
> set timeout second!

Pourquoi?

La boucle d'événements réorganise la priorité d'exécution :

1. Les tâches synchrones (comme console.log("console log first!") et console.log("console log last!!!")) sont exécutées immédiatement, dans l'ordre dans lequel elles apparaissent.
2. Les microtâches (telles que les rappels de promesse) reçoivent la priorité suivante et sont exécutées avant toute autre tâche asynchrone.
3. Les macrotâches (comme setTimeout) sont traitées en dernier, même si le délai d'attente est défini sur zéro.

Cela permet au moteur JavaScript de fonctionner de manière asynchrone, en effectuant d'autres tâches sans attendre la fin immédiate de toutes les opérations.

Photo de couverture par Andrew Petrov sur Unsplash

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!