Maîtrisez les promesses de JavaScript : questions de sortie délicates que tout développeur doit connaître ! (Partie 1)

Les promesses JavaScript sont un élément essentiel du développement Web moderne. Ils nous permettent de gérer les opérations asynchrones de manière propre et efficace. Cependant, les promesses peuvent souvent se comporter de manière surprenante, notamment lorsqu’elles sont combinées à des boucles d’événements et à des microtâches. Cet article est la première partie d'une série en deux parties dans laquelle nous abordons des questions délicates de sortie basées sur des promesses pour affiner vos compétences JavaScript.

À la fin de cette série, vous comprendrez mieux comment les promesses interagissent avec la boucle d'événements JavaScript. Passons aux cinq premières questions délicates !

Question 1 : Résolution de base de la promesse

console.log("Start");

const promise1 = new Promise((resolve) => {
  console.log("Promise started");
  resolve("Resolved");
});

promise1.then((result) => {
  console.log(result);
});

console.log("End");

Sortie :

Start
Promise started
End
Resolved

Explication :

1. Le premier console.log("Start") est exécuté.
2. L'exécuteur de la promesse s'exécute immédiatement, la journalisation de la promesse a commencé.
3. Le bloc .then() est planifié comme une microtâche une fois l'exécution du code actuel terminée.
4. console.log("End") s'exécute ensuite.
5. Enfin, les journaux de rappel .then() sont résolus lorsque la file d'attente des microtâches est traitée.

Question 2 : Promesses imbriquées

const promise2 = new Promise((resolve) => {
  resolve("Resolved 1");
});

promise2.then((result) => {
  console.log(result);
  return new Promise((resolve) => {
    resolve("Resolved 2");
  });
}).then((result) => {
  console.log(result);
});

Sortie :

Resolved 1
Resolved 2

Explication :

1. Le premier .then() enregistre Resolved 1 et renvoie une nouvelle promesse.
2. Le deuxième .then() attend que la promesse renvoyée soit résolue, enregistrant Résolu 2.

Question 3 : Promesse enchaînée avec résolution immédiate

const promise3 = Promise.resolve();

promise3
  .then(() => {
    console.log("Then 1");
  })
  .then(() => {
    console.log("Then 2");
  })
  .then(() => {
    console.log("Then 3");
  });

Sortie :

Then 1
Then 2
Then 3

Explication :

1. Lorsqu'une promesse est immédiatement résolue (Promise.resolve()), ses gestionnaires .then() sont mis en file d'attente dans la file d'attente des microtâches.
2. Chaque .then() renvoie une nouvelle promesse qui se résout après son exécution de rappel, entraînant une exécution séquentielle de Then 1, Then 2 et Then 3.

Question 4 : Gestion des rejets

const promise4 = new Promise((_, reject) => {
  reject("Error occurred");
});

promise4
  .then(() => {
    console.log("This will not run");
  })
  .catch((error) => {
    console.log("Caught:", error);
  })
  .then(() => {
    console.log("This will still run");
  });

Sortie :

Caught: Error occurred
This will still run

Explication :

1. La promesse est rejetée avec le message "Une erreur s'est produite".
2. Le bloc .catch() détecte l'erreur et enregistre Caught : Une erreur s'est produite.
3. Après .catch(), le prochain .then() s'exécute toujours car il est traité comme une promesse résolue à moins que le catch ne soit lancé à nouveau.

Question 5 : Mélanger Async/Await avec Promises

async function asyncFunc() {
  console.log("Async function started");
  return "Async result";
}

asyncFunc().then((result) => {
  console.log(result);
});

console.log("Synchronous log");

Sortie :

Async function started
Synchronous log
Async result

Explication :

1. Lorsque asyncFunc est appelé, il enregistre immédiatement le démarrage de la fonction Async.
2. La valeur de retour d'une fonction asynchrone est une promesse, donc le .then() est planifié comme une microtâche.
3. console.log("Synchronous log") s'exécute ensuite, suivi de la résolution de la promesse qui enregistre le résultat asynchrone.

Conclusion :

Dans cette première partie, nous avons couvert les bases des promesses JavaScript et exploré le fonctionnement de la résolution, du chaînage et de la gestion des rejets des promesses. Comprendre la boucle d'événements et la file d'attente des microtâches est crucial pour maîtriser les promesses, et ces questions le soulignent. Restez à l'écoute pour la partie 2, où nous plongerons dans des comportements de promesse plus avancés, notamment Promise.race, Promise.all, et plus encore !

Principaux points à retenir :

• La résolution de la promesse est toujours asynchrone et les gestionnaires .then() sont traités après le code synchrone actuel.
• Chaque .then() renvoie une nouvelle promesse, permettant le chaînage.
• catch() gère les rejets de promesses et les appels .then() suivants seront toujours exécutés.

Restez à l'écoute pour la Partie 2 de cette série, où nous abordons des astuces de promesses plus avancées !

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!