How to correctly execute several queries in a row based on the data received from the previous one?

Question

React

There is one request:

useEffect(() => {
    const loadData = async () => {
      await http.get(`/product/${id}/modification`, {
        params: {query},
      })
        .then((data) => {
          console.log('data', data);
        })
        .catch((error) => {
          console.log('error', error);
        });
    };

    loadData();
  }, []);

It returns some kind of response, how can I and how would it be correct to make the next request based on the data received from the previous request?
Do I need to make a request in then, or are there more elegant ways?
Or put the result of the first request into a variable and make the same call?
Or are there other better options?

Answer 1

why is there then at all if async/await is used?
if not a loop, then it works like this:
await http.get(`/product/${id}/modification`, {
params: {query},
})
await http.get(`/product/${id} /modification`, {
params: {query},
})
await http.get(`/product/${id}/modification`, {
params: {query},
})