Gestión de errores y respuestas correctas de AJAX

Cuando realiza una solicitud AJAX, se trata de una operación asíncrona. Esto significa que su código no espera la respuesta del servidor, sino que continúa ejecutando otras tareas.

Para gestionar la respuesta del servidor (o la ausencia de esta), jQuery proporciona métodos especiales llamados callbacks. Estas funciones se ejecutan únicamente cuando ocurren determinados eventos, como un éxito o un error.

El callback .done() es la opción principal para gestionar solicitudes AJAX correctas. Se ejecuta cuando el servidor responde con un código de estado que indica éxito (normalmente, entre 200 y 299).

• Recibe los datos devueltos por el servidor.
• Es el lugar perfecto para actualizar la interfaz de usuario con información nueva.

Vamos a obtener algunos datos y mostrarlos cuando la solicitud se complete correctamente. Observe cómo .done() se encadena a la llamada $.ajax().

Pero ¿qué ocurre si el servidor no puede completar su solicitud? Ahí es donde interviene el callback .fail(). Se ejecuta cuando la solicitud AJAX encuentra un error, como un 404 (No encontrado) o un 500 (Error del servidor).

• Le ayuda a informar al usuario o registrar problemas.
• Recibe detalles sobre el error.

Vamos a intentar obtener datos de una URL inexistente. El callback .fail() capturará el error y registrará sus detalles.

El callback .fail() proporciona tres parámetros útiles para ayudarle a entender qué salió mal:

• jqXHR: el objeto XMLHttpRequest de jQuery, que ofrece detalles de bajo nivel.
• textStatus: una cadena que describe el tipo de error (por ejemplo, "timeout", "error", "abort").
• errorThrown: el texto del estado HTTP (por ejemplo, "Not Found" para un 404).

Utilícelos para proporcionar información específica a sus usuarios.

A veces, debe realizar una acción independientemente de si la solicitud AJAX se completó correctamente o falló. Esa es la función del callback .always().

• Siempre se ejecuta después de cualquiera de los dos: .done() o .fail().
• Es ideal para tareas de limpieza, como ocultar un indicador de carga o volver a habilitar un botón.

Vamos a añadir .always() al ejemplo anterior. Simularemos un estado de carga y nos aseguraremos de eliminarlo tanto si la solicitud se completa correctamente como si falla.

Los métodos AJAX de jQuery devuelven un objeto similar a una Promise, lo que permite encadenar directamente los métodos .done(), .fail() y .always().

Este encadenamiento hace que su código sea más limpio y fácil de leer, ya que separa claramente los bloques de lógica de éxito, error y finalización.

Considere la siguiente solicitud AJAX de jQuery:

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

Si el servidor responde con un error 404 Not Found, ¿qué se imprimirá en la consola?

Ha aprendido los callbacks esenciales para gestionar AJAX de forma sólida:

• .done(): para respuestas correctas.
• .fail(): para gestionar errores.
• .always(): para acciones que deben ejecutarse pase lo que pase.

Al utilizarlos, sus aplicaciones pueden gestionar las interacciones de red correctamente y ofrecer una mejor experiencia a los usuarios, incluso cuando las cosas no salen según lo previsto.