如何在 Javascript 中等待具有不同参数的相同 function 的多个调用

Question

How can I await multiple calls of the same function with different params in Javascript?

I am aware of Promise.All([func1, func2, func 3...]) however I am essentially calling a function getRecipes(ingredients) from a "for loop" with different 'ingredients' being passed into getRecipes() each time. I can't pass an array of [getRecipes,getRecipes,getRecipes] into Promise.All() because I need to pass different params every time.

So how should I go about waiting for all of the getRecipes() results to be returned and then processing once they are all completed? I don't know the number of getRecipes requests since its dynamically called based on the "for loop".

Sample Code: `

           const newAnnotatedList = []
           const ingredientList = []
          
            for(var i = 0; i < listOfPictures.length; i++) {
              const ingredients =  runClarifai(listOfPictures[i].uri)
              ingredientList.push(ingredients)
            }
            console.log('Starting to wait')
           Promise.all(ingredientList).then((result) => console.log('Done Waiting'));
           for(var i = 0; i < listOfPictures.length; i++) {
            const ingredients =  ingredientList[i]
            // ingredientList.push(ingredients)

            newAnnotatedList.push({id:listOfPictures[i].id ,uri:listOfPictures[i].uri, ingredients: ingredients})
          }
           `

When I console.log(ingredientsList[0]) for example, I'm not returned the value of the promise (the array of ingredient strings) but instead:

Promise {
  "_40": 1,
  "_55": null,
  "_65": 0,
  "_72": Handler {
    "onFulfilled": [Function anonymous],
    "onRejected": [Function anonymous],
    "promise": Promise {
      "_40": 0,
      "_55": null,
      "_65": 0,
      "_72": null,
    },
  },
}

Answer 1

Sounds like what you want to do is first iterate through however many calls to getRecipes are required, and store the returned Promises in an array. Only once you have finished iterating through your loop, making all the required calls and pushing them to the array do you then pass that array to Promise.all() :

 function getRecipes(i) { return new Promise((resolve, reject) => { const timeout = Math.floor(Math.random() * 1500); setTimeout(() => resolve(i), timeout); }); } function callGetRecipesLoop() { const randNum = Math.floor(Math.random() * 10); console.log(randNum + ' results expected'); const promisesArray = []; for (let i = 0; i < randNum; i++) { promisesArray.push(getRecipes(i)); } Promise.all(promisesArray).then((result) => console.log(result)); } callGetRecipesLoop();

Answer 2

Try async await for clean code, such scenarios gets compilcated if we are counting on .then

Your problem is here Promise.all(ingredientList).then((result) => console.log('Done Waiting'));

result in then has your values

Solution:

const test = async() => {
const arrayOfResult = await Promise.all(ingredientsList.map(ingredient => getrecipies(ingredient)))
console.log(arrayOfResult) // [promise1_result, promise2_result, ...]
}
test()

Hope you now have clear idea.