javascript - 等到所有请求完成

Question

我正在实现网站并遇到 2 个问题。我正在使用 jQuery 3。

1) 我正在发送 2 个 AJAX 请求，如果失败，我想从这两个请求中获取信息。我正在使用这样的代码:

let ajaxCalls = [];

if (logoUploaded) {
    const sendPhoto = $.ajax({
        type: submit.data('ajax-logo-create-method').toUpperCase(),
        url: submit.data('ajax-logo-create-url'),
        headers: headers,
        data: {file: logo},
        dataType: 'json',
        success: function (data) {
            // here another request would be run
            sleep(500).then(() => {
                console.log('was sleeping 500 ms');
            });
            sleep(10000).then(() => {
                console.log('was sleeping 10000 ms');
            });
        }
    });
    ajaxCalls.push(sendPhoto);
}

const sendContactData = $.ajax({
    type: submit.data('ajax-data-method').toUpperCase(),
    url: submit.data('ajax-data-url'),
    headers: headers,
    data: data,
    dataType: 'json'
});

ajaxCalls.push(sendContactData);

$.when.apply(this, ajaxCalls).then(function () {
    hideValidationErrors();
    showSendStatusMessage('#' + submit.data('ajax-update-ok'));
    submit.removeClass('ajax-js-working');

}, function() {
    let validationErrors = [];
    $.each(ajaxCalls, function (index, ajaxCall) {
        if (ajaxCall.status === 422) {
            json = $.parseJSON(ajaxCall.responseText);
            console.log(json);
            $.each(json.errors, function (field, messages) {
                validationErrors.push({'field': field, 'messages': messages});
            });
        }
    });

    hideValidationErrors();

    if (validationErrors.length > 0) {
        $.each(validationErrors, function (id, object) {
            wrapper = $('#' + object.field + '-container');
            wrapper.addClass('error');
            displayValidationErrorMessages(wrapper, object.messages);
        });
    }

    showSendStatusMessage('#' + submit.data('ajax-update-error'));
    submit.removeClass('ajax-js-working');
});

但不幸的是，当使用这段代码时，$when .. then 似乎只在等待第一个失败的请求，我需要将它们都放在这里。

2) 第二个问题是我在第一个请求中取得的成功。在某些情况下，当此请求完成并成功时，我将不得不运行另一个请求，在这种情况下我想运行 $.when.apply(this, ajaxCalls).then(function () { 当成功请求完成时。是否有可能实现这一点？

如果可能，请给我完整的代码示例，我应该做哪些更改才能使其正常工作。

Answer 1

我最后做的是将开始和完成的请求添加到数组(ajaxCalls 和 doneAjaxCalls)，如下所示:

let ajaxCalls = [];
let doneAjaxCalls = [];

const fileInput = $('img#uploadedImg');

const fileExisted = fileInput.hasClass('imgExisted');
const fileWasRemoved = fileInput.hasClass('imgDeleted');
const fileWasUploaded = fileInput.hasClass('newImgUploaded');

const logo = fileInput.attr('src');

const needRemovePhoto = fileExisted && (fileWasRemoved || fileWasUploaded);

if (needRemovePhoto) {
    const removePhoto = $.ajax({
        type: submit.data('ajax-logo-delete-method').toUpperCase(),
        url: submit.data('ajax-logo-delete-url'),
        headers: headers,
        data: {file: logo},
        dataType: 'json',
        error: function (response) {
            doneAjaxCalls.push(response);
            handleMultipleAjaxCalls(submit, ajaxCalls, doneAjaxCalls);
        },
        success: function (response) {
            fileInput.removeClass('imgDeleted');
            fileInput.removeClass('imgExisted');
            if (fileWasUploaded) {
                const sendPhoto = $.ajax({
                    type: submit.data('ajax-logo-create-method').toUpperCase(),
                    url: submit.data('ajax-logo-create-url'),
                    headers: headers,
                    data: {file: logo},
                    dataType: 'json',
                    success: function (response) {
                        fileInput.addClass('imgExisted');
                    },
                    complete: function (response) {
                        doneAjaxCalls.push(response);
                        handleMultipleAjaxCalls(submit, ajaxCalls, doneAjaxCalls);
                    }
                });
            }
            else {
                doneAjaxCalls.push(response);
                handleMultipleAjaxCalls(submit, ajaxCalls, doneAjaxCalls);
            }
        }
    });
    ajaxCalls.push(removePhoto);
}
else if (fileWasUploaded) {
    const sendPhoto = $.ajax({
        type: submit.data('ajax-logo-create-method').toUpperCase(),
        url: submit.data('ajax-logo-create-url'),
        headers: headers,
        data: {file: logo},
        dataType: 'json',
        success: function (response) {
            fileInput.addClass('imgExisted');
        },
        complete: function (response) {
            doneAjaxCalls.push(response);
            handleMultipleAjaxCalls(submit, ajaxCalls, doneAjaxCalls);
        }
    });
    ajaxCalls.push(sendPhoto);
}

const sendContactData = $.ajax({
    type: submit.data('ajax-method').toUpperCase(),
    url: submit.data('ajax-url'),
    headers: headers,
    data: data,
    dataType: 'json',
    complete: function (response) {
        doneAjaxCalls.push(response);
        handleMultipleAjaxCalls(submit, ajaxCalls, doneAjaxCalls);
    }
});

ajaxCalls.push(sendContactData);

正如您在多种情况下看到的那样，我调用了 handleMultipleAjaxCalls 函数，并且我这样定义了这个函数:

window.handleMultipleAjaxCalls = function (submit, ajaxCalls, doneAjaxCalls) {
    // if not all expected requests were done (success or failure), do nothing
    if (doneAjaxCalls.length < ajaxCalls.length) {
        return;
    }

    // here we know that all expected AJAX requests were completed (success or failure)

    // here more logic after all requests are completed
});

所以在我执行这个函数时，在更多情况下它可能会发生逻辑应该被启动并且在这个函数中我比较是否所有启动的 ajaxcalls 真的完成了(只是简单的数组长度比较)