Estoy tratando de cancelar las llamadas de búsqueda usando AbortController . Así es como se ve mi extracción de API. Tengo una función que maneja las llamadas de obtención y publicación y estos métodos de obtención y publicación también se extraen por separado.

 export async function customAjax(options){ let options = {}; options.headers = { ...options.headers, ...obj.headers }; const response = await fetch(url, options); await response.json() } const get = (url, extra = {}) => api({ url, type: "GET", ...extra }); const post = (url, payload, extra = {}) => api({ url, data: payload ,type: "POST", }, ...extra }); const api = async (payload) => { try { promise = customAjax(payload); const response = await promise; if (response && !errorMessage) { return { response, error: false, loading: false, request: promise }; } else if (errorMessage) { return { response: false, error: "Error", loading: false, request: promise }; } } catch (e) { return { response: false, error: "Error", loading: false, request: promise }; } return { response: false, error: false, loading: true, request: promise }; }

Entonces, desde los componentes respectivos, llamaré a los métodos get o post.

 function MyComponent(){ useEffect(() => { makeCall(); saveResponse(); }, []); async function makeCall(){ const { response, error } = await post(URL, payload); // Handling code is not added here } async function saveResponse(){ const { response, error } = await get(URL); // Handling code is not added here } }

Como puede ver, este es un componente donde llamo a ambos métodos. Básicamente quiero cancelar las llamadas cuando me mude. ¿Cuál es la forma ideal de crear una instancia de cancelación y aprobarla? ¿Cómo lo logro con mi estructura API actual? Algunos consejos ayudarían y apreciarían