Fetch: abortar
La capacidad de abortar solicitudes de red en curso es esencial para crear aplicaciones web responsivas y eficientes. En JavaScript, la interfaz AbortController proporciona un mecanismo potente para cancelar solicitudes fetch. Este artículo profundiza en el uso de AbortController para gestionar solicitudes fetch, ofreciendo explicaciones detalladas y ejemplos prácticos para mejorar tu comprensión. Para obtener más información sobre fetch, consulta nuestra página anterior, Fetch API.
Introducción a AbortController
AbortController es parte de la Fetch API y te permite abortar una o más solicitudes fetch. Al integrar AbortController en tus solicitudes fetch, puedes controlar el momento de estas solicitudes, asegurándote de que no continúen innecesariamente y no desperdicien recursos.
Uso básico de AbortController
Para abortar una solicitud fetch, primero creas una instancia de AbortController y luego pasas su propiedad signal a la solicitud fetch. Aquí tienes un ejemplo básico:
En este ejemplo, creamos una instancia de AbortController y pasamos su signal a la solicitud fetch. Al llamar a controller.abort(), podemos abortar la solicitud fetch.
Ejemplo práctico: Abortar una solicitud fetch por acción del usuario
AbortController es particularmente útil para abortar solicitudes fetch basadas en interacciones del usuario. Considera un escenario en el que un usuario puede cancelar una operación de obtención de datos haciendo clic en un botón:
<body>
<button id="abortButton">Abort Fetch Request</button>
<script>
const controller = new AbortController();
const signal = controller.signal;
document.getElementById('abortButton').addEventListener('click', () => {
controller.abort();
});
fetch('https://httpbin.org/delay/5', { signal })
.then(response => response.json())
.then(data => alert(
'Data is successfully fetched! Refresh the page and try aborting.'
))
.catch(error => {
if (error.name === 'AbortError') {
alert('Fetch request was aborted by the user');
} else {
alert('Fetch error: ' + error.message);
}
});
</script>
</body>En este ejemplo, hacer clic en el botón con el ID abortButton abortará la solicitud fetch en curso. Utilizamos un punto final simulado que tarda 5 segundos en completar la solicitud. Si haces clic en el botón antes de los 5 segundos, abortarás la solicitud.
Manejo de múltiples solicitudes fetch con AbortController
AbortController puede gestionar múltiples solicitudes fetch simultáneamente. Puedes usar el mismo controlador para varias solicitudes fetch y abortarlas todas a la vez. Al usar AbortController, recuerda siempre manejar el AbortError de manera adecuada y realizar cualquier limpieza necesaria.
En este escenario, el método controller.abort() aborta todas las solicitudes fetch asociadas con la misma señal.
Uso avanzado de AbortController
Combinar AbortController con otras operaciones asíncronas
AbortController también se puede combinar con otras operaciones asíncronas. Por ejemplo, podrías querer abortar una solicitud fetch cuando se cumple una cierta condición dentro de un flujo de trabajo asíncrono:
En este ejemplo, la solicitud fetch es abortada por otra operación asíncrona después de un tiempo de espera especificado. La API que llamamos mediante fetch es un punto final simulado que tarda 5 segundos en responder, y configuramos un tiempo de espera para abortar la solicitud en un segundo.
Conclusión
AbortController es una herramienta poderosa para gestionar solicitudes fetch en JavaScript. Al comprender y utilizar AbortController, puedes crear aplicaciones web más responsivas y eficientes. Hemos explorado varias aplicaciones prácticas, desde abortos activados por el usuario hasta la implementación de tiempos de espera de solicitud y el manejo de múltiples solicitudes fetch simultáneamente. Con estas técnicas, puedes mejorar el rendimiento y la experiencia del usuario de tus aplicaciones web.
Práctica
¿Cuál es el propósito de pasar la propiedad signal de un AbortController a una solicitud fetch?