Manejar la falla de $.ajax en jQuery

La publicación de hoy discutirá el manejo de solicitudes de falla en AJAX en jQuery.

Manejar la falla $.ajax en jQuery

La solicitud de publicación AJAX de jQuery lleva a cabo una solicitud HTTP (AJAX) asíncrona.

Sintaxis:

jQuery.ajax([settings]).fail((jqXHR, textStatus) => {});
jQuery.ajax(url[, settings]).fail((jqXHR, textStatus) => {});

Dónde:

1. URL es la cadena que contiene la URL a la que se enviará la solicitud.
2. settings son los objetos de par clave/valor que configuran la solicitud AJAX. Todos los ajustes son opcionales; se puede establecer un valor predeterminado para cada opción con $.ajaxSetup().

El enfoque .fail() reemplaza el enfoque obsoleto .error(). Esta es una construcción alternativa a la opción de devolución de llamada de error.

Si la solicitud falla, se llama a la opción de devolución de llamada error dentro de la configuración AJAX. Recibe el jqXHR, una cadena que indica el tipo de error y un objeto de excepción, si lo hubiera.

Algunos errores integrados devuelven una cadena como objeto de excepción, como por ejemplo abort, timeout, no transport.

$.ajax() devuelve el objeto jQuery XMLHttpRequest (jqXHR), que es un superconjunto del objeto XMLHttpRequest nativo del navegador.

Entendámoslo con el siguiente ejemplo.

Nota: Los siguientes códigos no se pueden ejecutar tal cual y no tienen salida. Debe agregarse al código existente para ver los resultados.

Código HTML:

<form id="myForm">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" value="Smith" />
  <input type="submit" value="Send" />
</form>

Código JavaScript:

$('#myForm').submit(function(event) {
  event.preventDefault();
  $.ajax({
     method: 'POST',
     url: '/open/hello-world',
     data: {name: 'Smith', location: 'United State'},
     error: function(jqXHR, thrownError) {
       alert(jqXHR.status);
       alert(thrownError);
     }
   })
      .done(function(msg) {
        alert('Data Saved: ' + msg);
      })
      .fail((jqXHR, errorMsg) => {alert(jqXHR.responseText, errorMsg)});
})

En el ejemplo anterior, una vez que el usuario envía el formulario, se envía una llamada AJAX al servidor con la URL y los parámetros especificados. Cuando el servidor regresa con un mensaje exitoso, puede imprimir el mensaje en la consola o notificar al usuario con el mensaje apropiado.

Si el servidor regresa con un mensaje de error, puede detectar el error utilizando el controlador de errores o .fail() y notificar al usuario con el mensaje de error apropiado.