Mi problema es el siguiente :

Tengo una serie de identificaciones que necesito asignar a algunas identificaciones de base de datos mediante una solicitud HTTP a mi API como HTTP GET /foo/{id}

Necesito esperar a que todos los valores muestren los datos en mi aplicación

Actualmente estoy haciendo esto de la siguiente manera

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

Y en el código antes de imprimir los valores:

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

El código funciona bien, pero tarda un poco en ejecutarse si tengo muchas identificaciones.

En general, la primera solicitud finaliza en aproximadamente 0,5 segundos y, según la cantidad de solicitudes, la última puede durar entre 4 y 5 segundos.

Mi objetivo aquí es mostrar un texto de carga que informe al usuario cuántas solicitudes quedan y cuántas se han realizado.

Aquí hay un breve ejemplo usando la API jsonPlaceHolder.

Básicamente, lo que quiero tener es en lugar de loading.. El número de solicitudes restantes (como {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>

Nota : estoy usando Nuxt, no sé si eso cambia algo.