I am currently working on a project using React Native. One issue I have run into is that all fetch requests are being executed simultaneously. What I actually need is for one fetch to wait until the previous one has completed before using its data.

Specifically, I want to utilize the idTitle from the first fetch in the second fetch. However, due to them being executed concurrently, this is not possible.

function SongScreen({ route }) {

  const { textArtist, textSong } = route.params;

  const geniusUrl = 'https://api.genius.com';

  const [isLoading, setLoading] = useState(true);

  const [idTitle, setIdTitle] = useState([]);
  const [idVideoYT, setIdVideoYT] = useState([]);
       
  useEffect(async () => {
    fetch(geniusUrl + '/search?q=' + textSong, {
      headers: { 'Authorization': 'Bearer ' + geniusToken }
    })
      .then((response) => response.json())
      .then((json) => {
        for (const value of json.response.hits) {
          if ((value.result.title.toLowerCase() == textSong.toLowerCase()) &&
            (value.result.primary_artist.name.toLowerCase() == textArtist.toLowerCase())) {
            setIdTitle(value.result.api_path)
            setIdArtist(value.result.primary_artist.api_path)
          }
        }
      })
      .catch((error) => { AlertView(), setModalVisible(true) })
      .finally(() => setLoading(false));
  }, []);

          
  useEffect(() => {
    fetch(geniusUrl + idTitle, {
      headers: { 'Authorization': 'Bearer ' + geniusToken }
    })
      .then((response) => response.json())
      .then((json) => {
        for (const value of json.response.song.media) {
          if (value.provider == 'youtube')
            setIdVideoYT(value.url)
        }
      })
      .catch((error) => alert(error)) //{ AlertView(), setModalVisible(true) })
      .finally(() => setLoading(false));
  }, []);
    
  return (
    //.....
  )
}

In my attempts to solve this issue by concatenating the fetch calls like so, I encountered the same error:

useEffect(async () => {
    fetch(geniusUrl + '/search?q=' + textSong, {
      headers: { 'Authorization': 'Bearer ' + geniusToken }
    })
      .then((response) => response.json())
      .then((data) => {
        for (const value of data.response.hits) {
          if ((value.result.title.toLowerCase() == textSong.toLowerCase()) &&
            (value.result.primary_artist.name.toLowerCase() == textArtist.toLowerCase())) {
            setIdTitle(value.result.api_path)   
            setIdArtist(value.result.primary_artist.api_path)   
          }
        }
      })
      .then(
        fetch(geniusUrl + idTitle, {
          headers: { 'Authorization': 'Bearer ' + geniusToken }
        })
          .then((response) => response.json())
          .then((json) => {
            for (const value of json.response.song.media) {
              if (value.provider == 'youtube')
                setIdVideoYT(value.url)
            }
          })
          .catch((error) => alert(error)) //{ AlertView(), setModalVisible(true) })
          .finally(() => setLoading(false))
      )
      .catch((error) => { AlertView(), setModalVisible(true) })
      .finally(() => setLoading(false));
  }, []);

I made another attempt by adding a then inside the if block, but it produced an error stating that the then variable could not be found:

useEffect(async () => {
fetch(geniusUrl + '/search?q=' + textSong, {
  headers: { 'Authorization': 'Bearer ' + geniusToken }
})
  .then((response) => response.json())
  .then((data) => {
    for (const value of data.response.hits) {
      if ((value.result.title.toLowerCase() == textSong.toLowerCase()) &&
        (value.result.primary_artist.name.toLowerCase() == textArtist.toLowerCase())) {
         setIdTitle(value.result.api_path)
         setIdArtist(value.result.primary_artist.api_path)

          then(() => fetch(geniusUrl + value.result.api_path, {
            headers: { 'Authorization': 'Bearer ' + geniusToken }
          })
            .then((response) => response.json())
            .then((json) => {
              for (const value of json.response.song.media) {
                if (value.provider == 'youtube')
                  setIdVideoYT(value.url)
              }
            })
            .catch((error) => alert(error))
            .finally(() => setLoading(false))
          )

      }
    }
  })
  .catch((error) => alert(error))
  .finally(() => setLoading(false));


 }, []);

For convenience, I decided to include all three fetches within the same useEffect. Although I attempted to use await for the third fetch, it always ended up in the catch block:

useEffect(async () => {

fetch(geniusUrl + '/search?q=' + textSong, {
  headers: { 'Authorization': 'Bearer ' + geniusToken }
})
  .then((response) => response.json())
  .then((data) => {
    for (const value of data.response.hits) {
      if ((value.result.title.toLowerCase() == textSong.toLowerCase()) &&
        (value.result.primary_artist.name.toLowerCase() == textArtist.toLowerCase())) {
        setIdTitle(value.result.api_path)   //for third fetch
        setIdArtist(value.result.primary_artist.api_path)  
      }
    }
  })
  .catch((error) => { AlertView(), setModalVisible(true) })
  .finally(() => setLoading(false));


  fetch(lyricsUrl + textArtist + '/' + textSong)
    .then((response) => response.json())
    .then((text) => setDataLyrics(text.lyrics))
    .catch((error) => { AlertView(), setModalVisible(true) })
    .finally(() => setLoadingLyrics(false));


try {
  let response = await fetch(geniusUrl + idTitle, {
    headers: { 'Authorization': 'Bearer ' + geniusToken }
  });
  let id = await response.json();
  for (const value of id.response.song.media) {
    if (value.provider == 'youtube')
      setIdVideoYT(value.url)
  }
}
catch (error) {
  alert(error);
}
setLoading(false);

}