BorrowBits
Arquitectura Ajax
Portada » Blog » Computación » Programación » Truco: Abortar peticiones AJAX pendientes antes de enviar otra

Truco: Abortar peticiones AJAX pendientes antes de enviar otra

Arquitectura Ajax

En algunas ocasiones interesa cancelar o detener varias peticiones AJAX que ya han sido realizadas. En un sistema muy asíncrono, puede que unas llamadas sean más prioritarias que otras o que incluso cierta petición deba anular al resto de peticiones pendientes….

Existe un método del viejo XMLHttpRequest llamado abort() que realiza esta función y que también está soportado por jQuery. La idea es ejecutarlo justo antes de enviar al servidor una petición AJAX prioritaria que deba anular a las que ya estuvieran activas.

Pero, ¿cómo anularlas todas de un plumazo?

El truco consiste en «apilar» cada conexión justo antes de realizar una llamada y «desapilarla» al completar la petición. Una función abortarAll() se encargaría de cancelarlas todas a la vez. He aquí el código:


$.xhrPool = [];
$.xhrPool.abortAll = function() {
$(this).each(function(idx, jqXHR) {
jqXHR.abort();
});
$.xhrPool.length = 0
};
 $.ajaxSetup({
beforeSend: function(jqXHR) {
$.xhrPool.push(jqXHR);
},
complete: function(jqXHR) {
var index = $.xhrPool.indexOf(jqXHR);
if (index > -1) {
$.xhrPool.splice(index, 1);
}
}
});

La función de jQuery .ajaxSetup() establece una configuración por defecto común a todas las llamadas .ajax() que se realicen en el futuro (incluso para aquellas que se llevan a cabo a través de la función .load()).

Precaución: como .ajaxSetup() establece una configuración por defecto hemos de tener cuidado de no sobrescribir sus parámetros más adelante. La documentación oficial desaconseja su uso por esta misma razón.

Ahora imaginaos que nos toca ejecutar una llamada asíncrona prioritaria que debe cancelar al resto. Llamamos a la función así:

$.xhrPool.abortAll();

//Llamada con prioridad
.ajax(…);

Una última aclaración

Cuando una petición ha sido enviada al servidor, esta queda fuera de nuestro control. Lo que hace .abort() es ignorar cualquier respuesta que pudiera devolver el servidor a partir del momento en que ha sido abortada, pero la petición podría haber sido procesada en el servidor.

Angel H.

Tecnófilo irreparable y lector insaciable. Emigrante e inmigrante. Además de eso, Ingeniero de Telecomunicaciones y Product Manager. +10 años de experiencia en proyectos de Software, Cloud e Ingeniería de Redes. Me apasiona el DIY, la tecnología Blockchain y las Finanzas.

Un comentario

  • Hola, tengo una pregunta , si serian tan amables de ayudarme ,
    tengo una vista parcial mvc c#.net con un boton submit, el formulario es ajax.beginform
    y cuando doy click las peticiones xhr se van acumulando mas y mas, hasta llegar a un punto que se vuelve super lento la aplicacion ya que esta procesando todas esas peticiones,

    hay alguna forma de borrar y que solo me ejecute una sola peticion??
    ya intente borrar cache, outputcache , pero el problema esta cuando doy boton click
    la unica forma de vaciar esas peticiones es recargando la pagina, pero el cliente no le gusta

    adjunto una imagen, la peticion xhr se llama savemetricdetail, se va acumulando
    http://i66.tinypic.com/5vyl9u.png

Angel H.

Tecnófilo irreparable y lector insaciable. Emigrante e inmigrante. Además de eso, Ingeniero de Telecomunicaciones y Product Manager. +10 años de experiencia en proyectos de Software, Cloud e Ingeniería de Redes. Me apasiona el DIY, la tecnología Blockchain y las Finanzas.

Suscríbete

¡Sácale el máximo partido a BorrowBits!

Apúntate para seguir recibir por email las nuevas publicaciones, noticias sobre Blockchain pre-filtradas y material exclusivo para suscriptores. De momento es gratis:

Categorías

Bits del pasado

Sitio patrocinado por:

JitKey rentabilización apartamentos turísticos

JITKey.- Startup enfocada en la gestión de alojamientos turísticos.