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

问题

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)
         {
         }
    });
}

回答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…
  }
}

回答2:

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

回答3:

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..

来源：https://stackoverflow.com/questions/59219048/async-await-how-to-implement-javascript-async-await-in-a-recursive-ajax-functi

标签

javascript

ajax

asynchronous

async-await

synchronous