Jquery Ajax请求使用循环多次调用

Question

我需要使用循环在 jQuery/JavaScript 中执行一项任务。我需要调用循环 10 次，并且在每次迭代中，我需要进行 Ajax 调用。在每次迭代中，我还需要检查 Ajax 调用响应中的条件。如果满足条件，则应继续下一次迭代，并通过确认框提示用户。否则，循环应该结束。我恳请您对此提供帮助。

 function GetNextBagWeight() {
    let res = "OK";
    var arr = [];
    $.ajax({
        url: '/LoadingControl/GetNextBagWeight?BayId=' + 1,
        cache: false,
        dataType: 'json',
        async: false,
        success: function(response, status, xhr) {
            debugger
            var trHTML = '';
            var count = 1;
            if (response.isSuucess) {
                trHTML = '<tr><td>' + count + '</td><td>' +
                    response.BagWeight + "</td><td>" +
                    CurrentDateWithTimeString() + "</td></tr>";
                $('#tblRunTimeBagData').append(trHTML);
                resp = "OK";
                arr.push("OK")
            } else {
                trHTML = '<tr style="background-color: red;"><td>' + count + '</td><td>' +
                    response.BagWeight + "</td><td>" +
                    CurrentDateWithTimeString() + "</td></tr>";
                $('#tblRunTimeBagData').append(trHTML);
                arr.push("wait")
                if (confirm('Proceed')) {
                    alert('Thanks for confirming, start next iteration');
                }
            }
        }
    });
    
    return res;
}

这里一切都很好；还会出现确认弹出窗口。但是，后台的 Ajax 调用仍在下一次迭代中发生，这应该仅在单击确认按钮后发生。

Answer 1

您需要承诺 AJAX 调用。阅读这篇文章：https://www.taniarascia.com/how-to-promisify-an-ajax-call/

这是 AJAX 调用的承诺版本：

function doTheThing() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: window.location.href,
      type: 'POST',
      data: {
        key: 'value',
      },
      success: function (data) {
        resolve(data)
      },
      error: function (error) {
        reject(error)
      },
    })
  })
}

请注意：

• 返回 Promise
• 成功解决了
• 失败后被拒绝

她提供了这个用法示例：

doTheThing()
  .then((data) => {
    console.log(data)
    doSomethingElse()
  })
  .catch((error) => {
    console.log(error)
  })

现在，您希望使其可定制和链接，承诺成为下一个的先决条件：

function doTheThing(url, type, data) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      type: type,
      data: data,
      success: function (data) {
        resolve(data)
      },
      error: function (error) {
        reject(error)
      },
    })
  })
}

那么，假设您要进行一系列 AJAX 调用，那么：

let currentPromise = undefined;
for (let index = 0; index < myPromises.length; index++) {
    let prom = doTheThing(myPromises[index].url, myPromises[index].type, myPromises[index].data);
    if (!currentPromise) {
        currentPromise = prom;
    } else {
        currentPromise = currentPromise.then(prom);
    }
}