Понимание порядка выполнения в промисах JavaScript

Промисы в JavaScript предлагают модель асинхронного программирования, в которой код выполняется после определенного события или обещания , выполняется. Однако при работе с несколькими обещаниями важно понимать порядок выполнения, чтобы избежать непредсказуемого поведения.

Рассмотрим следующий фрагмент кода:

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);

После выполнения вы можете наблюдать следующий порядок вывода:

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

Понимание порядка выполнения

1. Обещания решаются асинхронно:
   Обещания обрабатываются независимо от текущего потока выполнения. Это означает, что обработчики .then() вызываются асинхронно после завершения текущего потока. обработчик завершает работу. По сути, они поставлены в очередь, поэтому вы видите 1, 2 «A» и 3 «B» напечатанными в этом порядке.
2. Внутренние обещания создают независимые цепочки:
   Обещания созданы внутри вложенных обработчиков .then(), таких как Promise.resolve('C') и Promise.resolve('D'), создаются новые независимые цепочки обещаний. Эти внутренние цепочки по своей сути не синхронизируются с внешней цепочкой.
3. Порядок выполнения не является детерминированным:
   Порядок выполнения этих независимых цепочек не гарантируется. В этом случае механизм обещаний выбирает выполнение обработчиков .then() в строках 5 и 12 раньше, чем обработчики в строках 6 и 7.
4. Рекомендации
   

Чтобы обеспечить определенный порядок выполнения, избегайте создания несинхронизированных цепочек обещаний и вместо этого полагайтесь на последовательное связывание обещаний. Возвращайте обещания из внутренних обработчиков .then(), чтобы связать их с родительским обещанием, как показано ниже:

Promise.resolve('A').then(function (a) { console.log(2, а); вернуть «Б»; }).then(функция (a) { var p = Promise.resolve('C').then(function (a) { console.log(7, а); }).then(функция (a) { console.log(8, а); }); console.log(3, а); вернуть р; // Связываем внутреннее обещание с родительской цепочкой }).then(функция (a) { var p = Promise.resolve('D').then(function (a) { console.log(9, а); }).then(функция (a) { console.log(10, а); }); console.log(4, а); вернуть р; // Связываем внутреннее обещание с родительской цепочкой }).then(функция (a) { console.log(5, а); }); консоль.журнал(1); setTimeout(функция () { консоль.журнал(6) }, 0);

При таком подходе порядок выполнения становится полностью детерминированным: 1, 2 "A", 3 "B", 7 "C", 8 неопределенный, 4 неопределенный, 9 "D", 10 неопределенных, 5 неопределенных и 6.