How to wait for results from multiple async methods wrapped in a for loop?-CodePudding

I'm developing a search algorithm which searches through 3 databases and prints out the results. The general structure of the code looks something like this:

for(type in ["player", "team", "event"]){
   this.searchService.getSearchResult(type).toPromise()
   .then(search_result => {
      if(type == "player"){
        this.player_search_results_full = this.getPlayerSearchResults(search_result, search_string);
      }
      if(type == "team"){
        this.team_search_results_full = this.getTeamSearchResults(search_result, search_string);
      }
      if(type == "event"){
        this.event_search_results_full = this.getEventSearchResults(search_result, search_string);
      }
   })
}
// this.getFinalDisplayResults()

getFinalDisplayResults(){
  // Do some actions on <type>_search_results_full lists
}

Those <type>_search_results_full will be a list that contains the full list of matches for the search_string. I'd like to then wait for all of those lists to be populated, then run them through another method getFinalDisplayResults which chooses a total of X number of results to display from those full lists.

The issue I'm facing is that this.getFinalDisplayResults() executes before those <type>_search_results_full lists are full. I tried putting everything in the for loop in a separate method getFullResults() and then doing something like this:

async getFinalDisplayResults(){
  await getFullResults()
  // Do something
}

But that seems to not work, as adding some logs shows that the for-loop in getFullResults() finishes without the lists being populated.

I don't have a strong understanding of toPromise() and asynchronous methods, so I'm sure I'm just approaching this incorrectly. Can someone help me understand what I should be doing instead?

CodePudding user response：

I tkink what you are looking for is Promise.all, as it takes an array of Promise and resolves to an array of results.

With your example, it could be something like :

const results = await Promise.all(["player", "team", "event"].map( type => 
   this.searchService.getSearchResult(type).toPromise()
))

CodePudding user response：

I think I know what you try to achieve, and the issue you are having, this.getFinalDisplayResults() is executed before you have the results because the logic inside the for loop is asynchronous, so the fix would be.

async function getDataFromBackend () {
for(let type in ["player", "team", "event"]) {
    const searchResult = await this.searchService.getSearchResult(type).toPromise()
    if(type === "player")
        this.player_search_results_full = this.getPlayerSearchResults(searchResult, search_string);
       
    if(type === "team")
         this.team_search_results_full = this.getTeamSearchResults(searchResult, search_string);
       
    if(type == "event")
         this.event_search_results_full = this.getEventSearchResults(searchResult, search_string);  
 }

}

  async function getFinalDisplayResults() {
        await getDataFromBackend(); // this will ensure you have the data, before you do the rest of the process
//rest of the logic here
    }

CodePudding user response：

We can clean it up a little, mainly by iterating the things that vary over the array of types.

const promises = [
  { type: 'player', method: 'getPlayerSearchResults'},
  { type: 'team', method: 'getTeamSearchResults'},
  { type: 'event', method: 'getEventSearchResults'}
].map(obj => {
  return this.searchService.getSearchResult(obj.type).toPromise().then(search_result => {
    return this[obj.method].bind(this)(search_result, search_string);
  })
});
return Promise.all(promises);