0Pricing
jQuery Academy · Aula

Tratamento de Várias Tarefas Assíncronas

Domine a coordenação de várias tarefas assíncronas independentes ou dependentes, garantindo a ordem correta de execução e o tratamento de erros em todas as operações.

Tratamento de Várias Tarefas Assíncronas é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.

Por que coordenar tarefas assíncronas?

Em desenvolvimento web, muitas operações são assíncronas. Isso significa que elas não acontecem instantaneamente nem em uma sequência rígida. Pense em buscar dados de um servidor, carregar imagens ou executar animações.

Quando sua aplicação precisa executar várias dessas tarefas ao mesmo tempo ou em uma ordem específica, é necessário ter uma forma de coordená-las com eficiência. Esta lição mostrará como fazer isso!

O desafio de várias tarefas

Imagine que você precise carregar o perfil de um usuário e suas notificações mais recentes. Ambas são solicitações separadas ao servidor.

  • Como saber quando ambas terminaram?
  • E se uma delas falhar?
  • E se uma depender da outra (por exemplo, obter as notificações de um ID de usuário específico encontrado no perfil)?

Sem uma coordenação adequada, sua interface poderá exibir dados incompletos ou parar de funcionar completamente.

Apresentando `$.when()` para execução paralela

O $.when() do jQuery é uma ferramenta poderosa para coordenar várias operações assíncronas independentes. Ele recebe um ou mais objetos Deferred/Promise como argumentos.

$.when() retorna uma Promise principal que será resolvida quando todas as Promises individuais passadas a ela tiverem sido resolvidas. Se qualquer uma delas for rejeitada, a Promise principal será imediatamente rejeitada.

Exemplo de `$.when()`: busca em paralelo

Vamos simular a busca de dois conjuntos de dados diferentes em paralelo. Usaremos $.Deferred() para simular solicitações AJAX para fins de demonstração.

Experimente executar este código:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay) {
    let dfd = $.Deferred();
    setTimeout(function() {
      console.log(`Finished fetching ${name}`);
      dfd.resolve(`Data for ${name}`);
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500);
  let settingsPromise = fetchData("App Settings", 800);

  console.log("Starting parallel fetches...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully!");
      console.log(`Profile: ${profileData}`);
      console.log(`Settings: ${settingsData}`);
    });
});

Processando os resultados de `$.when()`

Quando a Promise de $.when() é resolvida, seu retorno de chamada .done() recebe os valores resolvidos de cada uma das Promises originais como argumentos separados.

  • Se você passar N Promises para $.when(), o retorno de chamada .done() receberá N argumentos.
  • Os argumentos seguem a mesma ordem em que as Promises foram passadas para $.when().

Isso facilita trabalhar com todos os resultados assim que estiverem prontos.

Tratamento de erros com `$.when()`

O que acontece se uma das operações paralelas falhar? A Promise principal de $.when() será imediatamente rejeitada se qualquer uma das Promises individuais for rejeitada.

O retorno de chamada .fail() será então acionado e receberá o motivo da rejeição da primeira Promise que falhou. As operações paralelas restantes ainda serão concluídas, mas $.when() já terá sinalizado a falha.

Exemplo: `$.when()` com falha

Vamos modificar o exemplo anterior para que uma das buscas falhe. Observe a saída:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay, shouldSucceed = true) {
    let dfd = $.Deferred();
    setTimeout(function() {
      if (shouldSucceed) {
        console.log(`Finished fetching ${name}`);
        dfd.resolve(`Data for ${name}`);
      } else {
        console.log(`Failed to fetch ${name}`);
        dfd.reject(`Error: ${name} could not be loaded`);
      }
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500, true);
  let settingsPromise = fetchData("App Settings", 800, false); // This one will fail

  console.log("Starting parallel fetches (one will fail)...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully! (This won't run)");
    })
    .fail(function(errorReason) {
      console.log("One or more operations failed!");
      console.log(`Reason: ${errorReason}`);
    });
});

Coordenando tarefas dependentes

Às vezes, as tarefas não são independentes. Talvez você precise:

  • Buscar um ID de usuário.
  • Em seguida, usar esse ID para buscar os detalhes do usuário.
  • Depois, usar esses detalhes para buscar as publicações específicas do usuário.

Isso exige um encadeamento sequencial de operações assíncronas, em que cada etapa depende do sucesso e do resultado da etapa anterior. Fazemos isso encadeando .then() ou .pipe().

Exemplo: encadeamento de AJAX dependente

Veja como encadear duas chamadas AJAX simuladas em que a segunda depende do resultado da primeira. Observe como o valor retornado pelo primeiro .then() se torna a entrada do próximo.

// Assume jQuery is loaded in the environment
$(function() {
  function fetchUserId() {
    let dfd = $.Deferred();
    setTimeout(() => {
      console.log("User ID fetched: 123");
      dfd.resolve(123);
    }, 500);
    return dfd.promise();
  }

  function fetchUserDetails(userId) {
    let dfd = $.Deferred();
    setTimeout(() => {
      if (userId === 123) {
        console.log(`Details fetched for user ${userId}`);
        dfd.resolve(`Details for User ${userId}`);
      } else {
        dfd.reject("Invalid User ID");
      }
    }, 700);
    return dfd.promise();
  }

  console.log("Starting dependent fetch chain...");

  fetchUserId()
    .then(function(id) {
      return fetchUserDetails(id); // Return a new promise
    })
    .done(function(details) {
      console.log("Full chain successful!");
      console.log(`Final Result: ${details}`);
    })
    .fail(function(error) {
      console.log("Chain failed:", error);
    });
});

Teste seus conhecimentos

Considere um cenário em que você deseja carregar o perfil de um usuário e a lista de amigos dele. A solicitação da lista de amigos precisa do ID do usuário, que faz parte dos dados do perfil.

Qual abordagem do jQuery é mais adequada para essa coordenação específica?

Recapitulação: dominando a coordenação assíncrona

Você aprendeu a lidar com várias tarefas assíncronas com eficiência!

  • $.when(): ideal para executar tarefas independentes em paralelo e aguardar que todas sejam concluídas ou que alguma falhe.
  • Encadeamento com .then(): perfeito para tarefas dependentes, em que a saída de uma operação é necessária para a próxima.
  • Tratamento de erros: tanto $.when() quanto as Promises encadeadas fornecem .fail() para capturar rejeições em qualquer ponto, tornando suas aplicações mais robustas.

Esses padrões são essenciais para criar aplicações web dinâmicas e responsivas com jQuery.

Perguntas Frequentes

A aula “Tratamento de Várias Tarefas Assíncronas” é grátis?

Sim — o texto completo de “Tratamento de Várias Tarefas Assíncronas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.

O que vou aprender em “Tratamento de Várias Tarefas Assíncronas”?

Domine a coordenação de várias tarefas assíncronas independentes ou dependentes, garantindo a ordem correta de execução e o tratamento de erros em todas as operações. Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar jQuery Academy?

Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.

Quanto tempo leva a aula “Tratamento de Várias Tarefas Assíncronas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de jQuery Academy?

Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Compreensão dos Objetos Deferred
  2. Encadeamento e Composição de Promises
  3. Tratamento de Várias Tarefas Assíncronas
← Voltar para jQuery Academy