Estoy usando abortcontroller para cancelar una solicitud de recuperación dentro de un gancho de reacción personalizado como se muestra a continuación:

 useEffect(() => { const controller = new AbortController(); const { signal } = controller; const fetchData = async () => { try { setState({ status: 'pending', data: null, error: null }); const response = await fetch(url, { signal, ...options, }); // if response is an HTTP error like 4XX 5XX if (!response.ok) { throw new Error(response.statusText); } // if response is 2XX const data = (await response.json()) as T; setState({ status: 'resolved', data, error: null }); } catch (error) { setState({ status: 'rejected', data: null, error: error as Error }); } }; fetchData(); return () => { controller.abort(); // abort! }; }, [url, options]);

Haga clic para ver en vivo en CodeSandbox

Cuando trato de hacer varias solicitudes una tras otra, puedo ver que cancela todas mis solicitudes anteriores, lo cual es de esperar, pero cuando vuelvo a visitar las mismas solicitudes allí, no se cancela por segunda vez.

Podemos ver en la captura de pantalla anterior mientras cambiamos las ID rápidamente usando la flecha hacia arriba de la ID 10 a la 24, vemos que todas las solicitudes intermedias se cancelan con éxito, pero cuando retrocedemos con la flecha hacia abajo, todas las solicitudes intermedias se aciertan y no se cancelan esta vez. .