Know how many promise are pending

May 5, 2022

My problem is the following :

I have an array of ids that I need to map to some database Ids using an HTTP request to my API like HTTP GET /foo/{id}

I need to wait for all values to show the data in my application

I’m currently doing this the following

async getValuesByIds({}, ids){
    const valuesPromise = ids.map(async (id) => this.$axios.$get(`/foo/${id}`))
    return Promise.all(valuesPromise)
}

And in the code before printing the values :

this.loading = true
this.getLeadsValuesByIds(idsArray).then(data => {
        this.loading = false
        this.values = data
})

The code is working fine but takes some times to run if i have a lot of ids.

In general, the first request ended in about 0.5 seconds and depending on the number of request, the last one can go up to 4 to 5 seconds

My goal here is to display a loading text informating the user how many request are left and how many are done.

Here is a short example using the jsonPlaceHolder API.

Basically what i want to have is instead of loading.. The number of request left (like {n} / 99 loaded

const loadData = () => {
  const ids = Array.from({length: 99}, (_, i) => i + 1)


  updateDataText('loading....')
  const dataPromise = ids.map(async(id) => {
    const post = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
    return post.data
  })

  Promise.all(dataPromise).then(res => {
      updateDataText(JSON.stringify(res))
  })
}

const updateDataText = (text) => {
  const div = document.getElementById('dataText')
  div.innerText = text
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>

<button onclick="loadData()">LoadData</button>

<p id="dataText"></p>

Note : I’m using Nuxt, i don’t know if that change something.

>Solution :

You could use a <progress> tag like this

I’ve also added inflight and finished counter if you prefer that

const loadData = () => {
  const ids = Array.from({length: 99}, (_, i) => i + 1)
  let nStarted = 0, nFinished=0;
  const inflight = document.getElementById('inflight');
  const finished = document.getElementById('finished');
  const progress = document.getElementById('progress');
  progress.max = ids.length;

  updateDataText('loading....')
  const dataPromise = ids.map(async(id) => {
    nStarted++;
    inflight.textContent = nStarted - nFinished;
    const post = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
    progress.value++;
    nFinished++;
    finished.textContent = nFinished;
    inflight.textContent = nStarted - nFinished;
    return post.data
  })

  Promise.all(dataPromise).then(res => {
    updateDataText(JSON.stringify(res, null, 4))
  })
}

const updateDataText = (text) => {
  const div = document.getElementById('dataText')
  div.innerText = text
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>

<button onclick="loadData()">LoadData</button>
<progress id="progress" value=0></progress>
<div>In Flight: <span id="inflight"></span></span>
<div>Finished: <span id="finished"></span></span>
<pre id="dataText"></pre>