Cómo cancelar una solicitud de recuperación en JavaScript

Cómo cancelar una solicitud de recuperación en JavaScript

En este tutorial, aprenderemos cómo cancelar una solicitud de recuperación usando un controlador de cancelación en JavaScript.

Hasta ahora no teníamos ningún método incorporado para cancelar la solicitud de recuperación, actualmente el nuevo AbortController se agrega una interfaz a JavaScript para abortar la solicitud llamando a un abort() método.

Índice
  1. Cancelación de la solicitud de recuperación
  2. Cancelación de varias solicitudes de recuperación

Cancelación de la solicitud de recuperación

Para cancelar la solicitud de recuperación, primero debemos inicializar el AbortController constructor entonces devuelve un objeto, que contiene un signal propiedad.

Ahora tenemos que pasar el signal propiedad opcional recuperación a pedido.

Al final, tenemos que ejecutar el abort() método para cancelar la solicitud de recuperación actual asociada con una señal.

Ejemplo:

const cancel = document.querySelector('#cancel');
const controller = new AbortController();
const signal = controller.signal;
                                        
fetch('https://reqres.in/api/users?delay=5',{signal})   .then(response => response.json())
   .then(json => console.log(json))
   .catch(err=>console.log(err.message))

cancel.addEventListener('click',()=>{
  controller.abort();   console.log('request is aborted')
})

Si hace clic en el cancel botón, la siguiente solicitud de búsqueda se cancela con un AbortError.

También puede responder a la AbortError así en el catch método.

catch(err=>{
    if(err.name = 'AbortError'){        console.log(' fetch is cancelled')
    } else{
        console.log('other errors', err.message);
    }
})

Cancelación de varias solicitudes de recuperación

También podemos usar la misma señal para cancelar múltiples solicitudes de búsqueda.

const cancel = document.querySelector('#cancel');
const controller = new AbortController();
const signal = controller.signal;
                                        
fetch('https://reqres.in/api/users?delay=5',{signal})   .then(response => response.json())
   .then(json => console.log(json))
   .catch(err=>console.log(err.message))

fetch('https://reqres.in/api/users/2?delay=5',{signal})   .then(response => response.json())
   .then(json => console.log(json))
   .catch(err=>console.log(err.message))


cancel.addEventListener('click',()=>{
  controller.abort(); 
  console.log('request is aborted')
})

Si quieres conocer otros artículos parecidos a Cómo cancelar una solicitud de recuperación en JavaScript puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas