Async/Await-如何在递归Ajax函数中实现Javascript Async-Await?

问题描述

我有两个功能.

我多次调用trendyolStocksUpdate()函数，并在syncTrendyolOFFStocks()函数内部循环.

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

我使用了async/await，但是没有依次调用trendyolStocksUpdate()函数.它同时运行.

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

我的代码有什么问题?

以下是两个功能:

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

推荐答案

在成功函数中调用trendyolStocksUpdate(stockCount,price,product,size,color,rowCount);时，不会等待它.因此该函数将在递归调用完成之前返回.

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.

代替使用成功函数，您可以在等待的ajax调用之后放入该逻辑.

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

这篇关于Async/Await-如何在递归Ajax函数中实现Javascript Async-Await?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！