0Pricing
jQuery Academy · Aula

Compreensão dos Objetos Deferred

Compreenda os conceitos fundamentais dos objetos Deferred do jQuery, como eles representam operações assíncronas e seus estados (pendente, resolvido e rejeitado).

Compreensão dos Objetos Deferred é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 1 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.

Operações assíncronas e funções de retorno de chamada

No desenvolvimento web, muitas tarefas não acontecem instantaneamente. Pense em buscar dados de um servidor ou esperar o clique de um usuário. Essas são operações assíncronas.

Tradicionalmente, usaríamos funções de retorno de chamada: funções executadas somente depois que uma tarefa assíncrona termina. No entanto, funções de retorno de chamada aninhadas podem levar ao "inferno das funções de retorno de chamada", tornando o código difícil de ler e manter.

Conheça o Deferred do jQuery

É nesse ponto que os objetos Deferred do jQuery vêm em nosso auxílio! Um objeto Deferred é uma forma poderosa de gerenciar operações assíncronas de maneira mais organizada.

Ele funciona como um espaço reservado para um resultado futuro. Você associa a ele funções que serão executadas quando a operação terminar, seja com sucesso ou falha, sem bloquear o código principal.

Os três estados do Deferred

Um objeto Deferred pode estar em um de três estados, que refletem a situação da tarefa assíncrona que ele representa:

  • Pendente: O estado inicial. A operação ainda não foi concluída.
  • Resolvido: A operação foi concluída com sucesso.
  • Rejeitado: A operação falhou ou encontrou um erro.

Depois de resolvido ou rejeitado, o estado de um objeto Deferred não pode mais ser alterado.

Criando um objeto Deferred

Você cria um novo objeto Deferred usando $.Deferred(). Esse objeto começa no estado pendente.

Ele fornece métodos para alterar seu estado e registrar funções de retorno de chamada que serão executadas quando o estado mudar.

Tente criar um:

var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));

Sinalizando sucesso: .resolve()

Quando sua operação assíncrona é concluída com sucesso, você chama o método .resolve() no objeto Deferred.

Isso altera o estado de pendente para resolvido. Todos os argumentos passados a .resolve() serão encaminhados às funções de retorno de chamada de sucesso.

Observe a mudança de estado:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.resolve('Data fetched!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Sinalizando falha: .reject()

Se sua operação assíncrona falhar, você chama o método .reject().

Isso altera o estado do Deferred de pendente para rejeitado. Os argumentos passados a .reject() serão enviados às funções de retorno de chamada de falha, geralmente como mensagens de erro.

Veja como a rejeição funciona:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.reject('Network error!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Tratando o sucesso com .done()

Para reagir a uma operação bem-sucedida, quando o Deferred estiver resolvido, você associa uma função de retorno de chamada usando o método .done().

Essa função será executada somente se .resolve() for chamado, recebendo todos os argumentos passados por .resolve().

Vamos processar alguns dados:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = true; // Simulate success
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().done(function(message) {
  console.log('Success handler: ' + message);
});

Tratando falhas com .fail()

Da mesma forma, para tratar erros, quando o Deferred estiver rejeitado, você usa o método .fail().

A função de retorno de chamada passada a .fail() será executada somente se .reject() for chamado, recebendo seus argumentos.

Vamos simular um erro:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = false; // Simulate failure
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().fail(function(errorMessage) {
  console.log('Error handler: ' + errorMessage);
});

Executando sempre: .always()

Às vezes, há um código que precisa ser executado independentemente de a operação assíncrona ter sido bem-sucedida ou ter falhado. É nesse ponto que .always() entra em ação.

A função de retorno de chamada associada com .always() será executada tanto quando o Deferred estiver resolvido quanto quando estiver rejeitado.

Use .always() para tarefas de limpeza ou atualizações finais da interface:

var fetchData = function(shouldSucceed) {
  var dfd = $.Deferred();
  setTimeout(function() {
    if (shouldSucceed) {
      dfd.resolve('Data received!');
    } else {
      dfd.reject('Request failed!');
    }
  }, 1000);
  return dfd;
};

fetchData(false)
  .done(function(msg) { console.log('Success: ' + msg); })
  .fail(function(err) { console.log('Failure: ' + err); })
  .always(function() { console.log('Operation finished.'); });

Protegendo com .promise()

Quando você retorna um objeto Deferred de uma função, talvez não queira que o código externo possa alterar seu estado, por exemplo, chamando .resolve() ou .reject() diretamente.

O método .promise() retorna uma versão "somente leitura" do objeto Deferred. Ela expõe apenas métodos para associar funções de retorno de chamada, como .done(), .fail() e .always(), mas não permite alterar seu estado.

var createAsyncTask = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve('Task done!');
  }, 500);
  // Return only the promise, not the full Deferred object
  return dfd.promise();
};

var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
  console.log(msg);
});

// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise object

Teste seus conhecimentos

Qual dos métodos a seguir você usaria para registrar um retorno de chamada que é executado ONLY quando um objeto Deferred conclui sua operação assíncrona com sucesso?

Recapitulação: fundamentos de Deferred

Parabéns! Nesta lição, você compreendeu os conceitos básicos dos objetos Deferred do jQuery:

  • Eles gerenciam operações assíncronas, evitando o inferno de retornos de chamada.
  • Eles podem estar nos estados pendente, resolvido ou rejeitado.
  • Você usa .resolve() para indicar sucesso e .reject() para indicar falha.
  • Os retornos de chamada são associados com .done() (sucesso), .fail() (falha) e .always() (ambos).
  • .promise() retorna um objeto somente leitura para proteger a manipulação do estado.

Em seguida, aprenderemos a encadear e compor esses objetos poderosos!

Perguntas Frequentes

A aula “Compreensão dos Objetos Deferred” é grátis?

Sim — o texto completo de “Compreensão dos Objetos Deferred” é 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 “Compreensão dos Objetos Deferred”?

Compreenda os conceitos fundamentais dos objetos Deferred do jQuery, como eles representam operações assíncronas e seus estados (pendente, resolvido e rejeitado). 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 1 de 3.

Quanto tempo leva a aula “Compreensão dos Objetos Deferred”?

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