Как отправить несколько однотипных асинхронных Ajax запросов, только после успешного ответа прошло запроса?

Question

[Александр]

Зачем так нужно ? Если отправить одним запросом, то то Google Chrome ждет около 30 секунд ответа, а потом сбрасывает соединение. Нужно их отправлять асинхронно, но каждый после завершения другого, а в конце вывести, что отправка закончена. Как быть ?

for (var i = 0; i < imgData.imgSrc.length; i++)
                    {

                        var imageOne = {
                            camera:[imgData.camera[i]],
                            copyright:[imgData.copyright[i]],
                            date:[imgData.date[i]],
                            imgSrc:[imgData.imgSrc[i]],
                            imgTitle:[imgData.imgTitle[i]],
                            latitude:[imgData.latitude[i]],
                            longitude:[imgData.longitude[i]],
                            size:[imgData.size[i]]
                        };

                        jQuery.ajax({
                            type: "POST",
                            url: "/Map/AddDataImage/",
                            cache: false,
                            data: {image_data: imageOne,
                                image_data_from_sites: $.makeArray(uploadedImgFromUrl), 'item_id':data.item_id},
                            //async: false,
                            dataType: 'json',
                            success: function (data) {
                                //bootbox.confirm('Thank you! The attraction will appear on the website after reviewing by our team.', function () {
                                    
                                //});
                            }
                        });
                    }

Answer 1

[Константин]

например, рекурсивный вызов:

function sendByOne(imgData, i) {
    var imageOne = {
        camera:[imgData.camera[i]],
        copyright:[imgData.copyright[i]],
        date:[imgData.date[i]],
        imgSrc:[imgData.imgSrc[i]],
        imgTitle:[imgData.imgTitle[i]],
        latitude:[imgData.latitude[i]],
        longitude:[imgData.longitude[i]],
        size:[imgData.size[i]]
    };

    jQuery.ajax({
        type: "POST",
        url: "/Map/AddDataImage/",
        cache: false,
        data: {image_data: imageOne,
            image_data_from_sites: $.makeArray(uploadedImgFromUrl), 'item_id':data.item_id},
        //async: false,
        dataType: 'json',
        success: function (data) {
            //bootbox.confirm('Thank you! The attraction will appear on the website after reviewing by our team.', function () {
                
            //});

            i++;
            if (i < imgData.imgSrc.length) {
                sendByOne(imgData, i);
            }
        }
    });
}

sendByOne(imgData, 0);

Если нужно собирать все ответы, и/или делать что-то после завершения всех запросов, то лучше все это завернуть в промисы и уже на них логику делать

Comments

[Александр]

А как здесь применить Промисы ? Чтобы после последнего запроса, если он успешен что-то выполнялось ?
Ну или если все запросы успешны, то что-то выполняется ?

[Константин]

если в не влезать в подробности, то можно как-то так:

function sendByOne(imgData, i = 0) {
    return new Promise(function(resolve, reject) {
        var imageOne = {
            camera:[imgData.camera[i]],
            copyright:[imgData.copyright[i]],
            date:[imgData.date[i]],
            imgSrc:[imgData.imgSrc[i]],
            imgTitle:[imgData.imgTitle[i]],
            latitude:[imgData.latitude[i]],
            longitude:[imgData.longitude[i]],
            size:[imgData.size[i]]
        };

        jQuery.ajax({
            type: "POST",
            url: "/Map/AddDataImage/",
            cache: false,
            data: {image_data: imageOne,
                image_data_from_sites: $.makeArray(uploadedImgFromUrl), 'item_id':data.item_id},
            //async: false,
            dataType: 'json',
            success: function (data) {
                //bootbox.confirm('Thank you! The attraction will appear on the website after reviewing by our team.', function () {
                    
                //});

                i++;
                if (i < imgData.imgSrc.length) {
                    sendByOne(imgData, i).then(
                        function(r) {
                            resolve(r);
                        },
                        function(e) {
                            reject(e);
                        });
                } else {
                    resolve(data);
                }
            },
            error: function (data) {
                reject(data);
            }
        });
    })
}

sendByOne(imgData).then(
    function(r) {
        alert('Отправлено!');
    },
    function(e) {
        alert('Ошибка!');
        console.log(e);
    }
);

А если влезать в подробности, то у вас там нужно разделить логику подготовки данных, отправки запроса, обработку успеха/ошибки для каждого запроса, счетчики состояний запросов для отрисовки прогресс-бара, и всякое такое