Comprendre l'ordre d'exécution dans les promesses JavaScript

Les promesses en JavaScript offrent un modèle de programmation asynchrone dans lequel le code est exécuté une fois un événement spécifique ou une promesse , est accompli. Cependant, lorsqu'il s'agit de plusieurs promesses, il est essentiel de comprendre l'ordre d'exécution pour éviter un comportement imprévisible.

Considérez l'extrait de code suivant :

Promise.resolve('A')
  .then(function(a){console.log(2, a); return 'B';})
  .then(function(a){
     Promise.resolve('C')
       .then(function(a){console.log(7, a);})
       .then(function(a){console.log(8, a);});
     console.log(3, a);
     return a;})
  .then(function(a){
     Promise.resolve('D')
       .then(function(a){console.log(9, a);})
       .then(function(a){console.log(10, a);});
     console.log(4, a);})
  .then(function(a){
     console.log(5, a);});
console.log(1);
setTimeout(function(){console.log(6)},0);

Lors de l'exécution, vous pouvez observer l'ordre de sortie suivant :

1
2 "A"
3 "B"
7 "C"
4 "B"
8 undefined
9 "D"
5 undefined
10 undefined
6

Comprendre l'ordre d'exécution

1. Les promesses sont résolues de manière asynchrone :
   Les promesses sont résolues indépendamment du thread d'exécution actuel. Cela signifie que les gestionnaires .then() sont appelés de manière asynchrone une fois le thread en cours terminé. le gestionnaire se termine. Ils sont essentiellement mis en file d'attente, c'est pourquoi vous voyez 1, 2 "A" et 3 "B" imprimés dans cet ordre.
2. Les promesses intérieures créent des chaînes indépendantes :
   Promesses créées dans les gestionnaires .then() imbriqués, comme Promise.resolve('C') et Promise.resolve('D'), créez de nouvelles chaînes de promesses indépendantes. Ces chaînes internes ne se synchronisent pas intrinsèquement avec la chaîne externe.
3. L'ordre d'exécution n'est pas déterministe :
   L'ordre d'exécution de ces chaînes indépendantes n'est pas garanti. Dans ce cas, le moteur de promesse choisit d'exécuter les gestionnaires .then() des lignes 5 et 12 avant ceux des lignes 6 et 7.
4. Recommandations
   

Pour garantir un ordre d'exécution spécifique, évitez de créer des chaînes de promesses non synchronisées et comptez plutôt sur la liaison des promesses de manière séquentielle. Renvoie les promesses des gestionnaires internes .then() pour les enchaîner avec la promesse parent, comme indiqué ci-dessous :

Promise.resolve('A').then(function (a) { console.log(2, a); renvoyer 'B'; }).then(fonction (a) { var p = Promise.resolve('C').then(function (a) { console.log(7, a); }).then(fonction (a) { console.log(8, a); }); console.log(3, a); retourner p ; // Lier la promesse interne à la chaîne parent }).then(fonction (a) { var p = Promise.resolve('D').then(function (a) { console.log(9, a); }).then(fonction (a) { console.log(10, a); }); console.log(4, a); retourner p ; // Lier la promesse interne à la chaîne parent }).then(fonction (a) { console.log(5, a); }); console.log(1); setTimeout (fonction () { console.log(6) }, 0);

Avec cette approche, l'ordre d'exécution devient entièrement déterministe : 1, 2 "A", 3 "B", 7 "C", 8 non défini, 4 non défini, 9 "D", 10 non défini, 5 non défini et 6.