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

Question

我有两个功能。

我多次调用 trendyolStocksUpdate() 函数，在 syncTrendyolOFFStocks() 函数中有一个循环。

我使用了 async/await 但 trendyolStocksUpdate() 函数没有按顺序调用。它同时运行。

我的代码有什么问题？

下面是两个函数：

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

Answer 1

您的 trendyolStocksUpdate 函数需要 return Promise 才能正常工作。

Answer 2

即使你已经等待 jQuery Ajax 仍然是异步的并且有自己的回调函数。 尝试在 [=23 中将异步设置为 false =] Ajax 选项。

async: false

不推荐这样做，因为它违背了 Ajax. 的全部目的，但您的问题似乎更倾向于同步 api 调用，因此这可能会骗你..

Answer 3

当您在成功函数中调用 trendyolStocksUpdate(stockCount,price,product,size,color,rowCount); 时，它不会被等待。所以函数会在递归调用完成前return

您可以在等待的 ajax 调用之后放入该逻辑，而不是使用成功函数。

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？

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

javascript

ajax

asynchronous

synchronous

async-await