Async/Await - How to implement Javascript Async-Await in a recursive Ajax function?

Question

I have two functions.

I call trendyolStocksUpdate() function several times with a loop inside syncTrendyolOFFStocks() function.

I used async/await but trendyolStocksUpdate() function is not called sequentially. It runs simultaneously.

What is wrong with my code ?

Below are the two functions:

async function syncTrendyolOFFStocks(){

  //This function sends "out of stock products" one by one
  //to trendyolStocksUpdate function, so they their quantity will be initalized to 0
  //For example, T-Shirt XL Yellow, and T-Shirt XXL Red are sent.

  for(var product in all){
    var colors = all[product];
    for(var singleColor in colors[0]){
      var size = colors[0][singleColor];
      for(var index in size){
        var singleSize = size[index];
        await trendyolStocksUpdate(0,"",allProducts[product],singleSize,singleColor,0);
      }
    }
  }
}


async function trendyolStocksUpdate(stockCount,price,product,size,color,rowCount){

  //This function sends given Product Variation to trendyolUpdateStock.php with jQuery.ajax
  //recursively. 1000 product's quantity are equalized to 0, once at a time.

  dataObj = {
    rowCount: rowCount,
    product: product,
    size:size,
    color:color,
    stockCount: stockCount,
  };

  if(price != ""){
    dataObj["price"] = price;
  }

  await jQuery.ajax({
         type: "POST",
         url: "/wp-content/plugins/promc/templates/trendyolUpdateStock.php",
         dataType: 'json',
         data: dataObj,
         success: function(data)
         {

           if(data.numberOfRows == 1000)
           {
              rowCount = rowCount + 1000;
              trendyolStocksUpdate(stockCount,price,product,size,color,rowCount);
           }
           else
           {
             jQuery("#trendyolMonitor").append("<h3>Completed!</h3>");
             rowCount = 0;
           }
         },
         error: function(XMLHttpRequest, textStatus, errorThrown)
         {
         }
    });
}

AFAIK, jQuery.ajax() doesn't return a Promise, so the await does nothing here, since it'll simply resolve immediately if used on something that isn't a Promise. You need to either use fetch() instead, or wrap the jQuery.ajax call in a Promise. — user5734311
– user5734311, Commented Dec 6, 2019 at 19:20
@ChrisG it's not a promise but it is thenable. await will not simply resolve immediately. — Patrick Roberts
– Patrick Roberts, Commented Dec 6, 2019 at 19:26
@PatrickRoberts Ah, I did check the docs again to make sure but didn't read far enough :/ — user5734311
– user5734311, Commented Dec 6, 2019 at 19:31

Alexander · Accepted Answer · 2019-12-06 19:44:56Z

1

When you call trendyolStocksUpdate(stockCount,price,product,size,color,rowCount); inside of the success function it’s not being awaited. So the function will return before the recursive call is completed.

Instead of using a success function, you could put that logic in after the awaited ajax call.

async function trendyolStocksUpdate(stockCount,price,product,size,color,rowCount){
  //This function sends given Product Variation to trendyolUpdateStock.php with jQuery.ajax
  //recursively. 1000 product's quantity are equalized to 0, once at a time.

  dataObj = {
    rowCount: rowCount,
    product: product,
    size:size,
    color:color,
    stockCount: stockCount,
  };

  if(price != ""){
    dataObj["price"] = price;
  }

  try {
    const data = await jQuery.ajax({
      type: "POST",
      url: "/wp-content/plugins/promc/templates/trendyolUpdateStock.php",
      dataType: 'json',
      data: dataObj
    });
    if(data.numberOfRows == 1000)
    {
      rowCount = rowCount + 1000;
      await trendyolStocksUpdate(stockCount,price,product,size,color,rowCount);
    }
    else
    {
      jQuery("#trendyolMonitor").append("<h3>Completed!</h3>");
      rowCount = 0;
    }
  } catch (error) {
    // Error stuff…
  }
}

edited Dec 6, 2019 at 19:44

answered Dec 6, 2019 at 19:35

Alexander

6583 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Patrick Roberts Over a year ago

Or const data = await jQuery.ajax({ /* ... */ }); if (data.numberOfRows == 1000) ...

HOY Over a year ago

@alexander, can you please include what is inside /*...*/ . ? ..... I mean should I remove success function and error function ?

Alexander Over a year ago

Yes. That is better!

Patrick Roberts Over a year ago

@Alexander don't catch the error. Errors in API functions should propagate to the caller.

Alexander Over a year ago

@HOY Get rid of the try/catch in trendyolStocksUpdate, and instead put a try/catch around wherever you call syncTrendyolOFFStocks.

|

gkrthk · Accepted Answer · 2019-12-06 19:27:30Z

0

Even if u have await the jQuery Ajax is still asynchronous and has its own callback function. Try setting async as false in jQuery Ajax options.

async: false

This is not recommended as it defeats whole purpose of Ajax. But your question seems more towards synchronous api calls, so this might do the trick for you..

answered Dec 6, 2019 at 19:27

gkrthk

3411 silver badge7 bronze badges

Comments

Celsiuss · Accepted Answer · 2019-12-06 19:24:12Z

-1

Your trendyolStocksUpdate function needs to return a Promise for this to work properly.

answered Dec 6, 2019 at 19:24

Celsiuss

9057 silver badges19 bronze badges

1 Comment

Patrick Roberts Over a year ago

All async functions return a Promise. This doesn't answer the question.

Collectives™ on Stack Overflow

Async/Await - How to implement Javascript Async-Await in a recursive Ajax function?

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related