For loop with axios call returns before running the .then response so it returns an empty array

Question

When debugging, I have break points and it shows both axios calls and then goes straight to the end of the for loop to return an empty array instead of going to the .then(response => { which would push the json object into product array. How can I make the function wait for the pushes into the array before returning?

function getProduct(appId, method, productId, skuType, catalog, descriptionTypes, categories, 
   manufacturer, displayTemplate, accessoryMax, categorizeAccessories, skuNumberType, skuNumberVal, 
   mfgName, partNumber) {

   var products = [];  
  for(var i = 0; i < appId.length; i++){
     console.log("begining of i: " + i);
     var jsonObj = {};
     axios.get("http://ws-na1.spexlive.net/service/rest/catalog", {
   params: {
    appId : appId[i],
    method: method,
    productId: productId,
    skuType: skuType,
    catalog: catalog,
    descriptionTypes: descriptionTypes,
    categories: categories,
    manufacturer: manufacturer,
    displayTemplate: displayTemplate,
    accessoryMax: accessoryMax,
    categorizeAccessories: categorizeAccessories,
    skuNumberType: skuNumberType,
    skuNumberVal: skuNumberVal,
    mfgName: mfgName[i],
    partNumber: partNumber[i]
   }
  })

.then(response => {
  console.log(response);
  console.log("Etilize product info call successfull.");    
  if( parser.validate(response.data) === true) { //optional (it'll return an object in case it's not valid)
    jsonObj = parser.parse(response.data,options);
  }

  // Intermediate obj
  var tObj = parser.getTraversalObj(response.data,options);
  jsonObj = parser.convertToJson(tObj,options);
  console.log(jsonObj);
  

  products.push(jsonObj);
  // console.log(isPushed);
  console.log(products);
  console.log("i: " + i);
  console.log("appId.length: " + appId.length);

 })
 .catch(error => { //catch error from Geohash using DynamoDB to query
   console.log(error)
   ("Oops! Something went wrong with getting Product specs.")
 })
   console.log("Ending of loop");
 } // end of for loop
  return products;
}

Does this answer your question? [Axios.get().then() in a for loop](https://stackoverflow.com/questions/56532652/axios-get-then-in-a-for-loop) — stvn, Sep 02 '20 at 19:39
My problem is that the return keeps getting triggered before any pushes gets done so it always returns an empty array. When I debug I see that it returns the empty array which gets printed and then it goes to push the json objects to the array — nguyenv9, Sep 02 '20 at 19:44
did you even read the problem/solutions in the link I provided you? You need to await all the promises returned from axios instead of trying to immediately handling the resolves. There's literally multiple solutions to your problem on SO already so I would suggest trying to have a look at them, starting with the link I pasted above. — stvn, Sep 02 '20 at 19:49

score 0 · Answer 1 · answered Jan 12 '21 at 18:43

You have to await the axios call.

async function getProduct(...)
{
    ...
    await axios.get("http://ws-na1.spexlive.net/service/rest/catalog", {...}).then(() => {...})
    ...
}

The axios call immediately returns a response. If you do not await the response,

For loop with axios call returns before running the .then response so it returns an empty array

1 Answers1