Tratamento de Erros e Sucessos em AJAX

Quando faz uma solicitação AJAX, trata-se de uma operação assíncrona. Isso significa que o seu código não espera a resposta do servidor; ele continua executando outras tarefas.

Para lidar com a resposta do servidor (ou com a ausência dela), o jQuery fornece métodos especiais chamados funções de retorno. Essas funções são executadas somente quando determinados eventos ocorrem, como sucesso ou falha.

A função de retorno .done() é a opção principal para lidar com solicitações AJAX bem-sucedidas. Ela é executada quando o servidor responde com um código de status que indica sucesso (normalmente entre 200 e 299).

• Ela recebe os dados retornados pelo servidor.
• É o lugar ideal para atualizar a interface do usuário com informações recentes.

Vamos buscar alguns dados e exibi-los quando a solicitação for bem-sucedida. Observe como .done() é encadeada à chamada $.ajax().

Mas e se o servidor não puder atender à sua solicitação? É nesse caso que entra a função de retorno .fail(). Ela é executada quando a solicitação AJAX encontra um erro, como um 404 (Não encontrado) ou 500 (Erro do servidor).

• Ela ajuda você a informar o usuário ou registrar problemas.
• Ela recebe detalhes sobre o erro.

Vamos tentar buscar dados de uma URL inexistente. A função de retorno .fail() capturará o erro e registrará os detalhes.

A função de retorno .fail() fornece três parâmetros úteis para ajudar você a entender o que deu errado:

• jqXHR: o objeto XMLHttpRequest do jQuery, que oferece detalhes de baixo nível.
• textStatus: uma cadeia de caracteres que descreve o tipo de erro (por exemplo, "timeout", "error", "abort").
• errorThrown: o texto do status HTTP (por exemplo, "Not Found" para um 404).

Use esses parâmetros para fornecer informações específicas aos usuários.

Às vezes, você precisa executar uma ação independentemente de a solicitação AJAX ter sido bem-sucedida ou ter falhado. Essa é a função da função de retorno .always().

• Ela é sempre executada depois de qualquer uma das duas, .done() ou .fail().
• É ótima para tarefas de limpeza, como ocultar um indicador de carregamento ou reativar um botão.

Vamos adicionar .always() ao exemplo anterior. Simularemos um estado de carregamento e garantiremos que ele seja removido independentemente de a solicitação ser bem-sucedida ou falhar.

Os métodos AJAX do jQuery retornam um objeto semelhante a uma Promise, permitindo encadear diretamente os métodos .done(), .fail() e .always().

Esse encadeamento torna o código mais limpo e fácil de ler, separando claramente os blocos de lógica de sucesso, erro e finalização.

Considere a seguinte solicitação AJAX do jQuery:

$.ajax({
  url: "/api/data",
  method: "GET"
})
.done(function() {
  console.log("A");
})
.fail(function() {
  console.log("B");
})
.always(function() {
  console.log("C");
});

Se o servidor responder com um erro 404 Not Found, o que será exibido no console?

Você aprendeu as funções de retorno essenciais para um tratamento robusto de AJAX:

• .done(): para respostas bem-sucedidas.
• .fail(): para lidar com erros.
• .always(): para ações que devem ser executadas aconteça o que acontecer.

Ao usá-las, seus aplicativos podem lidar de forma adequada com as interações de rede, proporcionando uma experiência melhor aos usuários mesmo quando as coisas não saem como planejado!