Encadeamento e Composição de Promises

Em desenvolvimento web, frequentemente precisamos executar tarefas assíncronas (como buscar dados) em uma ordem específica. O encadeamento de promessas permite fazer isso de forma organizada.

Em vez de aninhar retornos de chamada, o que pode levar ao "inferno de retornos de chamada", podemos vincular as operações sequencialmente, tornando nosso código muito mais fácil de ler e manter.

O método .then() é fundamental para o encadeamento. Quando um Deferred (ou Promise) é resolvido, seu retorno de chamada .then() é executado. O que esse retorno de chamada retorna pode então ser usado pelo .then() seguinte no encadeamento.

Se o retorno de chamada retornar um novo Deferred, o encadeamento aguardará a resolução desse novo Deferred antes de prosseguir.

Vamos ver um exemplo simples em que simulamos duas etapas assíncronas. A segunda etapa é executada somente depois que a primeira é concluída e usa os dados da primeira etapa.

Observe como o resultado de step1 ('Data from Step 1') é passado para step2.

O valor retornado por um retorno de chamada .then() determina a entrada do próximo .then().

• Se você retornar um valor que não seja Deferred, esse valor se tornará o valor resolvido do próximo .then().
• Se você retornar um objeto Deferred, o encadeamento será pausado até que esse Deferred seja resolvido; em seguida, seu valor resolvido será passado ao próximo .then().

Embora .then() seja o padrão moderno, o .Deferred() do jQuery também oferece .pipe(). Ele é semelhante a .then(), mas foi originalmente projetado para transformar o valor resolvido ou rejeitado, ou para filtrar qual Deferred continua o encadeamento.

.pipe() pode ser usado para retornar um novo Deferred que é resolvido com um valor transformado, efetivamente "canalizando-o" para a próxima etapa.

Aqui, usamos .pipe() para obter o resultado da primeira operação, transformá-lo (por exemplo, convertê-lo para letras maiúsculas) e então passar o valor transformado ao manipulador .done() final.

E se você tiver várias tarefas assíncronas independentes, mas precisar aguardar a conclusão de todas elas antes de prosseguir? É aí que $.when() entra em ação.

$.when() recebe um ou mais objetos Deferred (ou Promises) como argumentos e retorna um novo Deferred. Esse novo Deferred só é resolvido quando todos os Deferreds de entrada tiverem sido resolvidos.

Neste exemplo, simulamos duas solicitações AJAX independentes (fetchUser e fetchPosts). Usamos $.when() para aguardar a conclusão de ambas antes de registrar os resultados combinados.

Observe que elas são executadas em paralelo, não sequencialmente.

Quando o Deferred retornado por $.when() é resolvido, seus retornos de chamada .done() ou .then() recebem os valores resolvidos de cada Deferred de entrada como argumentos separados, na ordem em que foram passados para $.when().

Isso facilita combinar e processar dados de várias fontes assim que todos estiverem disponíveis.

Considere o seguinte trecho de código jQuery:

let dfd1 = new $.Deferred();
let dfd2 = new $.Deferred();

dfd1.then(function(val) {
  return val + " World";
}).then(function(newVal) {
  console.log(newVal); // Line A
  return dfd2;
}).then(function() {
  console.log("Finished!"); // Line B
});

dfd1.resolve("Hello");
dfd2.resolve();

Qual é a saída FINAL exibida no console e em que ordem?

Aprendemos a gerenciar fluxos de trabalho assíncronos complexos:

• Encadeamento com .then(): sequencia as operações, passando os resultados de uma etapa para a seguinte.
• .pipe(): um método mais antigo para transformar valores ou mapear Deferreds em um encadeamento.
• Composição com $.when(): aguarda a conclusão, em paralelo, de vários Deferreds independentes antes de prosseguir, fornecendo seus resultados como argumentos separados.

Esses padrões são essenciais para criar aplicações assíncronas robustas e fáceis de ler.