Compreendendo a ordem de execução em promessas JavaScript

As promessas em JavaScript oferecem um modelo de programação assíncrona onde o código é executado uma vez em um evento ou promessa específica , é cumprido. No entanto, ao lidar com múltiplas promessas, é essencial entender a ordem de execução para evitar comportamentos imprevisíveis.

Considere o seguinte trecho de código:

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

Após a execução, você pode observar a seguinte ordem de saída:

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

Compreendendo a ordem de execução

1. As promessas são resolvidas de forma assíncrona:
   As promessas são resolvidas independentemente do thread de execução atual. Isso significa que os manipuladores .then() são chamados de forma assíncrona após o thread atual terminar. o manipulador é concluído. Eles estão essencialmente na fila, e é por isso que você vê 1, 2 "A" e 3 "B" impressos nessa ordem.
2. Promessas internas criam cadeias independentes:
   Promessas criadas dentro de manipuladores .then() aninhados, como Promise.resolve('C') e Promise.resolve('D'), criam novas cadeias de promessas independentes. Essas cadeias internas não são sincronizadas inerentemente com a cadeia externa.
3. A ordem de execução não é determinística:
   A ordem de execução para essas cadeias independentes não é garantida. Nesse caso, o mecanismo de promessa opta por executar os manipuladores .then() nas linhas 5 e 12 antes daqueles nas linhas 6 e 7.
4. Recomendações
   

Para garantir uma ordem específica de execução, evite criar cadeias de promessas não sincronizadas e, em vez disso, confie na vinculação de promessas de maneira sequencial. Retorne promessas de manipuladores .then() internos para encadeá-las com a promessa pai, conforme mostrado abaixo:

Promise.resolve('A').then(function (a) { console.log(2, a); retornar 'B'; }).then(função (a) { var p = Promise.resolve('C').then(função (a) { console.log(7, a); }).then(função (a) { console.log(8, a); }); console.log(3, a); retornar p; // Vincula a promessa interna à cadeia pai }).then(função (a) { var p = Promise.resolve('D').then(função (a) { console.log(9, a); }).then(função (a) { console.log(10, a); }); console.log(4, a); retornar p; // Vincula a promessa interna à cadeia pai }).then(função (a) { console.log(5, a); }); console.log(1); setTimeout(função(){ console.log(6) }, 0);

Com esta abordagem, a ordem de execução torna-se totalmente determinística: 1, 2 "A", 3 "B", 7 "C", 8 indefinido, 4 indefinido, 9 "D", 10 indefinidos, 5 indefinidos e 6.