• Tengo el siguiente código donde mi solicitud de búsqueda me da una matriz como salida.
• Luego, para cada elemento dentro de esta matriz, quiero obtener algunos datos correspondientes a ese elemento en particular.

NOTA: Aquí hay varias solicitudes que se realizan después de que se completa la primera solicitud. Leí sobre el encadenamiento de promesas, pero no pude encontrar la manera de implementarlo en este escenario en el que tengo más de una solicitud que depende de la promesa de la primera solicitud. ¡Por favor ayuda!

 useEffect(() => { const fetchController = new AbortController(); const { signal } = fetchController; fetch(someURL, { signal }) .then((res) => res.json()) .then((data) => { // array of ids. Will make a fetch request with each of those ids. console.log(data.array); if (data.success) { // this is the array that i get from the outer fetch request. setSocialLinkList(data.array); // Fetch request for each of the elements in the array. Object.keys(data.array).forEach((index) => { fetch(`${functionThatGetsTheURL(data.array[index].id)}`, { signal }) .then((response) => response.json()) .then((responseData) => { console.log(responseData); }) .catch((error) => { console.log(error); }); }); } }).catch((err) => { console.log(err); }); return () => { // when this function is executed, i get : DOMException: The user aborted a request. fetchController.abort(); }; }, []);

El código mencionado anteriormente funciona para mí, sin embargo, cuando cancelo las solicitudes, obtengo la siguiente excepción en la consola, a pesar de usar controladores de captura para evitar lo mismo:

 Uncaught (in promise) DOMException: The user aborted a request.

Aunque he agregado controladores de captura para las solicitudes. ¿Cuál es la forma correcta de manejar esta situación? ¿Cómo puedo abortar todas las solicitudes correctamente?