could you please help me with my code. I need run requests concurrently but get requests one by one. Below code example (use VueJS method/function)
async manageData() {
// array of chart’s properties
const charts = await axios.post(‘/report/chart_data’, {id: this.id);
// concurrent requests with variable ‘charts’
const result = await Promise.all(
charts.map((chart, key) => axios.post(‘/report/data_range’, {id: key}))
);
}
Solution :
const charts = await axios.post(‘/report/chart_data’, {id: this.id);
Will make a single request and wait until it is completed before continuing. This is necessary, as you then use the charts response to form the subsequent requests.
charts.map((chart, key) => axios.post(‘/report/data_range’, {id: key}))
Will make charts.length number of requests in parallel. This is desirable per the description and because it appears the requests are independent.
the screenshot supports this analysis (first request is waiting for a response before subsequent requests are made in parallel).
If you know the length of the charts response, you could parallelize the first and subsequent requests, since you only use key (index) and not the actual charts to perform the latter requests.
If the concerned with why the latter requests seem to take steadily increasing time to respond, that may be just a coincidence in complexity of each request, or, as user ctt@ pointed out in the comments, could indicate the backend is not handling the requests simultaneously. But that doesn’t seem to be the concern (per the comment).