解决并等待 forEach 中的 ajax 调用

Question

我知道这里已经找到了一个问题和答案，这就是我的例子。 问题是：Other question

这是我的代码：

$('.start').click(function() {
    Generate();
})

function Generate()
{
    var _p = Promise.resolve();
    customers.forEach(customer =>
       _p = _p.then(() => AxCall(customer))
    );
}

function AxCall(v)
{
    $.ajax({
        url: '/generate/axgenerate/'+v['clm_customer_id'],
        complete: function() {
            count++;
            $('.completed').text(count);
        }
    })
}

问题是仍然在这里调用的 ajax 都被立即触发。 我该怎么做才能一个接一个地触发 ajax 调用，即使它失败或成功

Answer 1

您需要返回调用$.ajax 的结果。该返回值是一个 jQuery 承诺：

function AxCall(v)
{
    return $.ajax({
//  ^^^^^^
    // ...

这样，您使用 forEach 设置的承诺链使链中的每一步都等待上一步完成。

但是既然要不管ajax成功还是失败都继续，还需要将rejection转换为fulfillment，所以：

customers.forEach(customer =>
    _p = _p.then(() => AxCall(customer).catch(error => {});
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^
);

（您可能会以某种方式报告错误，但这里的关键是catch 将捕获拒绝并将其转换为履行[如果您不throw 或返回一个承诺是/将是拒绝。）

---

如果可以使用async函数和await，那就简单一点了：

async function Generate()
{
    for (const customer of customers) {
        try {
            await $.ajax({
                url: '/generate/axgenerate/'+v['clm_customer_id'],
                complete: function() {
                    count++;
                    $('.completed').text(count);
                }
            });
        } catch (error) {
            // (perhaps report error here)
        }
    }
}