Async/Await - 如何在遞歸 Ajax 函數中實現 Javascript Async-Await？

Question

我有兩個功能。

我使用trendyolStocksUpdate()函數內部的循環多次調用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(stockCount,price,product,size,color,rowCount); 在成功函數內部，它沒有被等待。 所以函數會在遞歸調用完成之前返回。

您可以在等待的 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…
  }
}

Answer 2

即使你有 await jQuery Ajax 仍然是異步的並且有它自己的回調函數。 嘗試在 jQuery Ajax 選項中將 async 設置為 false。

async: false

不推薦這樣做，因為它違背了 Ajax 的全部目的。 但是您的問題似乎更傾向於同步 api 調用，所以這可能對您有用..

Answer 3

您的trendyolStocksUpdate函數需要返回一個 Promise 才能正常工作。