Tengo una aplicación React que puede realizar una serie de solicitudes de recuperación, según las interacciones del usuario. Quiero anular las solicitudes de búsqueda antiguas cada vez que la aplicación recibe una nueva.

Para lograr esto, he creado un gancho personalizado, useData . Su función principal es ejecutar un gancho useEffect cada vez que cambia la url . Me parece que la forma más fácil de abortar solicitudes antiguas es usar el mecanismo de limpieza proporcionado por useEffect . Pero esto abort todas las solicitudes, no solo las incompletas.

¿Hay algún problema oculto que esto pueda causar? Parece que no debería hacer mucho para una recuperación resuelta, pero no puedo encontrar ninguna documentación que lo respalde.

Este es mi código:

 /** Returns data for a given url. */ export const useData = function (dataUrl) { const [loadedData, setLoadedData] = useState(Object.assign({})); // runs if/when the url changes useEffect(() => { // new controller for each new url const controller = new AbortController(); async function getData(dataUrl) { if (!dataUrl) return; // load data & set state try { const data = await fetch(dataUrl, { signal: controller.signal, }); setLoadedData(data); } catch (e) { console.error(`useData failed for url ${dataUrl}\n${e}.`); } } getData(dataUrl); // clean up the last request before running // useEffect for on the next url return () => { controller.abort(); }; }, [dataUrl]); // return data in the hook's state, set by useEffect return loadedData; };