从for循环内的AJAX链中的最后一个AJAX请求返回值

Question

我有一个for循环，在一次迭代中，我需要发出四个AJAX请求，然后等待最后一个请求的结果。

• jQuery延迟-获取链接ajax调用的结果
• 将jquery.when().then()链接在具有固定链端调用的循环中
• 如何使for循环等到异步调用成功后再继续

现在，我只知道如何将数据从先前的promise传递给另一个promise（就像这个很酷的答案），但我需要将上次AJAX调用的值返回到外部数组（并等待上次AJAX调用完成），然后继续循环之外的其他函数。

                attaches.forEach(function(attach)) {
                    if(attach.val == "val1"){
                        attachments.push(attach.val1);
                    }
                    if(attach.val == "val2"){
                         attachments.push(attach.val2);
                    }
                    if(attach.val == val3){
                       function func1(){
                           var params = [param1,param2];
                           return   $.post(api, params.join('&'))
                       }
                       function func2(){
                           console.log('1111');
                           return new Promise(function(resolve, reject)) {
                               var xhr = new XMLHttpRequest();
                               xhr.onload = function () {
                                   resolve(xhr.response);
                               } 
                               xhr.open('GET', img_src);
                               xhr.responseType = 'blob';
                               xhr.send();                           
                           });
                       }
                       function uploadPhoto(upload_url, bulbSend){
                               console.log('<Del><F7>              function uploadPhoto');
                           return $.ajax({
                               url: upload_url, 
                               type: 'POST',
                               data: bulbSend,
                               dataType: 'json',
                               processData: false,
                               contentType: false,
                           });                   
                       } 
                       function saveResult(params){
                          
                           return $.post(api, params.join('&'))
                       }
                           func1().then(fun1hand()).then(console.log('a32w436bya3b7naua'));
                       function fun1hand(){
                           return function(dat4a) {
                               return  func2().then(func2hand(dat4a));
                           };
                       }
                       function func2hand(dat4a){
                           console.log('2222');
                           return function(datums){
                               console.log('3333');
                               var upload_url = dat4a.upload_url;
                               console.log('UPLOAD__URL BEFORE PROMISE  '+upload_url);
                               var bulbSend = new FormData();
                               bulbSend.append('file1', datums, 'file.jpg');
                               
                 return uploadPhoto(upload_url,bulbSend).then(func3hand());
                           }
                       }
                       function func3hand(){
                         return  function(data2){
                             var params = [data2.param1, data2.param2, data2.param3];
                             return saveResult(params).then(pushToAttachmentsHandler());
                         }
                       }
                       function pushToAttachmentsHandler(){
                           return function(data3){
                               console.log('PUSUSUSUSSUSUSUUSUS PUSHHHHHHH PUSH DA BAUTTON');
                               console.log(attachments);
                               return pushDat(data3).then(console.log(attachments));
                           }
                       }
                       function pushDat(data3){
                           console.log('1111');
                           return new Promise(function(resolve, reject) {
attachments.push(data3.param3+"_"+data3.param1));
                           console.log('11111111111');
                           });
                       }
                        
                    }
                });

不在循环中的函数在console.log('3333')insidepromise之前启动其console.logs...但他们需要等待循环内的AJAX调用完成和循环完成。

现在，如果AJAX被拒绝，我需要在超时后重复它（每秒服务器请求限制）--我如何在我的代码中为promise内部的本机XMLHttpRequest()和返回的jQuery AJAX调用设置它呢？

Answer 1

回调或promise能够处理这种异步控制流...

假设您的原始非工作代码是...

for(var i=0; i < 10; i++){
    $.get('http://example.com/rest/users/'+i);
    $.get('http://example.com/rest/posts/'+i);
    $.get('http://example.com/rest/comments/'+i);
    $.get('http://example.com/rest/events/'+i);
}

var i = 1;

getSet(repeater);

// define a repeater function to be used as recursive callback
function repeater (){
    // increment counter
    i++;
    // if we still have items to process, get another set
    if(i < 10){
        getSet(repeater);
    }
}

function getSet(cb){
    // define queue
    var counter = 0;
    // make four api calls, defining success callbacks, which call the
    // originally passed callback if the counter reaches 0. Increment counter before each request. This means the callback fires only for the last result
    counter++;
    $.get('http://example.com/rest/users/'+i, handleSuccess);
    counter++;
    $.get('http://example.com/rest/posts/'+i, handleSuccess);
    counter++;
    $.get('http://example.com/rest/comments/'+i, handleSuccess);
    counter++;
    $.get('http://example.com/rest/events/'+i, handleSuccess);

    function handleSuccess(data){
        // do something with data
        --counter || cb();
    }
}

这个模式的工作原理是这样的...

getset是第一次调用的，它带有一个repeater函数，在完成所有异步请求后，该函数将被调用。getset函数在进行异步调用时递增堆栈，在异步回调时递减堆栈，在堆栈恢复为零且队列中不再有异步作业时调用repeater。然后，repeater回调重复整个过程，调用getset并将自身作为回调传递，直到满足条件为止。