• I have the following code where my fetch request gives me an array as the output.
• Then for each element inside this array I want to fetch some data corresponding to that particular element.

NOTE : Here there are multiple requests being made after the first request gets completed. I read about Promise chaining but couldn't figure out how to implement that in this scenario where i have more than one request that depends on the promise from the first request. Please help!

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();
    };
  }, []);

The above-mentioned code works for me, however, when i abort the requests, i get the following exception in the console, despite using catch handlers to prevent the same :

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

Although i have added catch handlers for the requests. What is the correct way to handle this situation? How can i abort all the requests correctly?