Javascript – Loop through API 10 times, although, using the ID of each returned API call as a parameter for the NEXT api call

I am trying to make 10 API calls to the reddit API to get a users most recent comments.

Basically, Reddit uses a parameter ‘after’ in the URI to get the next page. So basically, if there is some dummy example comment data below, I need the LAST ID.

Example.

API Call: https://www.reddit.com/user/USERNAME/comments.json?limit=3

returns:

{
   id: 'd4gf125',
   comment: 'blah blah blah'
},
{
   id: 'dag42ra',
   comment: 'blah blah blah'
},
{
   id: '**hq6ir3j**', // I need this ID right here, the LAST in the list for the next API call
   comment: 'blah blah blah'
},

Then, another API call needs to be made directly AFTER the previous, using the ID as a parameter.

API Call:

`https://www.reddit.com/user/USERNAME/comments.json?limit=3&after=tl_hq6ir3j`

This will run 10 times, which will get 10 pages, so in total, 30 results.

I have tried using this for loop but as for loops are not asynchronous, I cannot change the variable ‘lastID’ in time.

First attempt:

const handleSubmit = async () => {
    setLoading(true);
    axios.get(`${apiUrl}user/${username}/about.json`).then((res) => {
      setUserData({
        about: res.data.data,
      });
      axios
        .get(`${apiUrl}user/${username}/comments.json?limit=100`)
        .then((res) => {
          let data = res.data.data.children;
          let lastItem = data[data.length - 1];
          for (i = 0; i < 10; i++) {
            axios
              .get(
                `${apiUrl}comments/${lastItem.data.id}/comments.json?limit=100&after=tl_${lastItem}`
              )
              .then((res) => {
                lastItem =
                  res.data.data.children[res.data.data.children.length - 1];
              });
          }
        });
    });
  };

If you need some example REAL data, see the link below:

https://www.reddit.com/user/bulkorcut99/comments.json?limit=1000&after=t1_hq6ir3j