Como crear un middleware o intercept de llamadas AJAX con Javascript

por
Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos controlar los errores de todas las llamadas que aparecen en nuestro sitio web y que hayan sido creadas con un AJAX.

Para ello vamos a usar un interceptor para guardar las llamadas con error y las vuelve a ejecutar después de 30 segundos en JavaScript/jQuery:

Paso 1: Configura el archivo HTML y carga las bibliotecas necesarias

Primero, configura tu archivo HTML y asegúrate de que estés cargando jQuery, ya que utilizaremos jQuery para realizar llamadas AJAX y manejar errores.

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial de Interceptor AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- Tu contenido HTML aquí -->
    <button id="ejecutarLlamadas">Ejecutar Llamadas</button>

    <script src="tu_script.js"></script>
</body>
</html>

Paso 2: Crea el archivo JavaScript (tu_script.js)

Ahora, crea un archivo JavaScript donde implementarás el interceptor y la lógica para volver a ejecutar las llamadas con error después de 30 segundos.

// Paso 1: Crea una estructura de datos para almacenar las llamadas fallidas
var llamadasFallidas = [];

// Paso 2: Intercepta errores de AJAX y almacena las llamadas fallidas
$(document).ajaxError(function (event, jqXHR, settings, thrownError) {
    // Almacena la llamada fallida en el array
    llamadasFallidas.push({
        settings: settings,
        error: thrownError
    });
});

// Paso 3: Función para reintentar llamadas fallidas después de 30 segundos
function reintentarLlamadasFallidas() {
    setTimeout(function () {
        for (var i = 0; i < llamadasFallidas.length; i++) {
            var llamadaFallida = llamadasFallidas[i];
            $.ajax(llamadaFallida.settings)
                .done(function (data) {
                    // Llamada exitosa, puedes realizar acciones adicionales aquí si es necesario
                })
                .fail(function (jqXHR, textStatus, errorThrown) {
                    // Maneja el error si la llamada aún falla después del reintento
                    console.error("Error al reintentar llamada:", errorThrown);
                });
        }
    }, 30000); // 30 segundos (30000 ms)
}

// Paso 4: Manejar el evento del botón para ejecutar las llamadas
$(document).ready(function () {
    $("#ejecutarLlamadas").click(function () {
        // Aquí puedes realizar tus llamadas AJAX
        // Ejemplo de llamada AJAX:
        $.ajax({
            url: "tu_url",
            type: "GET",
            success: function (data) {
                // Maneja la respuesta exitosa aquí
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // Maneja el error de la llamada AJAX aquí
                console.error("Error en la llamada AJAX:", errorThrown);
            }
        });
    });
});

Paso 3: Uso del tutorial

  • Agrega tus llamadas AJAX dentro del evento del botón #ejecutarLlamadas.
  • Cuando una llamada AJAX falla, se almacenará en llamadasFallidas.
  • Después de 30 segundos, las llamadas almacenadas en llamadasFallidas se reintentarán automáticamente.
  • Puedes personalizar las llamadas AJAX según tus necesidades específicas dentro de la función $.ajax.

Este tutorial te proporciona una estructura básica para interceptar y reintentar llamadas con error después de 30 segundos. Puedes expandirlo y adaptarlo según los requisitos de tu proyecto, como implementar lógica de renovación de tokens o notificaciones adicionales.

Post Views: 9

Deja un comentario