Question

我正在使用$ .when（）。然后（成功，失败）.always（）模型发送3个异步ajax调用。

这是我的代码

$.when(
    $.ajax({
        url: NewsCategoryUrl,
        beforeSend: function () {
            //alert('NewsCategoryUrl berfore send by Boda');
        },
        headers: {
            'accept': 'application/json;odata=verbose',
            'content-type': 'application/json;odata=verbose'
        },
        success: function (data) {
            //alert('NewsCategoryUrl done');
            $.each(data.d.results, function (index, item) {
                NewsCategoryList.push(G_G.GetNewsCategoryObject(item));
                //alert(JSON.stringify(NewsCategoryList[index]));
            });
            // alert('after loop: ' + NewsCategoryList);
        },
        error: function (jqXHR, errorThrown) {
            alert(errorThrown.stack);
        }
    }),
    $.ajax({
        url: NewsFeedUrl,
        beforeSend: function () {
            alert('NewsFeedUrl berfore send by Boda');
        },
        headers: {
            'accept': 'application/json;odata=verbose',
            'content-type': 'application/json;odata=verbose'
        },
        success: function (data) {
            //alert('NewsFeedUrl done');
            $.each(data.d.results, function (index, item) {
                NewsFeedList.push(G_G.GetNewsFeedObject(item));
                //alert(JSON.stringify(NewsFeedList[index]));
            });
            //alert('after loop: ' + NewsFeedList);

        },
        error: function (jqXHR, errorThrown) {
            alert(errorThrown.stack);
        }
    }),
    $.ajax({
        url: UpdatesUrl,
        beforeSend: function () {
            alert('UpdatesUrl berfore send by Boda');
        },
        headers: {
            'accept': 'application/json;odata=verbose',
            'content-type': 'application/json;odata=verbose'
        },
        success: function (data) {
            //alert('UpdatesUrl done');
            $.each(data.d.results, function (index, item) {
                updates.push(G_G.GetUpdateObject(item));
                //alert(JSON.stringify(updates[index]));
            });
            //alert('after loop: ' + updates);
        },
        error: function (jqXHR, errorThrown) {
            alert(errorThrown.stack);
        }
    })).then(function () {
    /*                alert("got 'ya all :D");
                    alert(NewsCategoryList);
                    alert(NewsFeedList);
                    alert(updates);*/
    SaveUpdatesToLocalstorage(updates);
    NewsCategoryReandering();
    SliderRendering(3);
}, function () {
    alert('some went wrong');
}).always(function () {
    alert('in always');
    myApp.closeModal('.popup-splash');
});

问题在于，当我尝试在第二次或第三次ajax调用中注释掉任何beforeSend时，我最终会在fail部分发出警告（“有些出错”）和未定义的结果..

我在google搜索后找到的所有信息都是关于时间问题（主要是与我不同的同步请求），以及一个关于ASI的SO答案，我无法通过我的案例进行验证。

请注意，当我在第一个ajax请求中注释第一个警报时，一切都继续正常工作..

任何帮助？

Answer 1

从我在代码中看到的，你提到的问题可能是你试图在ajax谓词中调用3 "when异步调用，也许（只是可能）你需要它们是按特定顺序执行的，我的意思是，首先您需要结束对NewsCategoryUrl的调用，然后继续"NewsFeedUrl然后再转到UpdatesUrl。

当您收到警报时，只需在对话框中显示和确认所花费的时间就足以让3个电话以正确的顺序完成，在这种情况下一切正常。

希望这有帮助

Answer 2

原来是一个时间问题（仍然不知道如何/为什么会这样！）..

供将来参考，最终代码如下：

function sleepFor(sleepDuration) {
    var now = new Date().getTime();
    while (new Date().getTime() < now + sleepDuration) { /* do nothing */ }
};

$.when(
    $.ajax({
        url: NewsCategoryUrl,
        beforeSend: function () {
            //alert('NewsCategoryUrl berfore send by Boda');
        },
        headers: {
            'accept': 'application/json;odata=verbose',
            'content-type': 'application/json;odata=verbose'
        },
        success: function (data) {
            //alert('NewsCategoryUrl done');
            $.each(data.d.results, function (index, item) {
                NewsCategoryList.push(G_G.GetNewsCategoryObject(item));
                //alert(JSON.stringify(NewsCategoryList[index]));
            });
            // alert('after loop: ' + NewsCategoryList);
        },
        error: function (jqXHR, errorThrown) {
            alert(errorThrown.stack);
        }
    }),
    $.ajax({
        url: NewsFeedUrl,
        beforeSend: function () {
            //alert('NewsFeedUrl berfore send by Boda');
             sleepFor(350);
        },
        headers: {
            'accept': 'application/json;odata=verbose',
            'content-type': 'application/json;odata=verbose'
        },
        success: function (data) {
            //alert('NewsFeedUrl done');
            $.each(data.d.results, function (index, item) {
                NewsFeedList.push(G_G.GetNewsFeedObject(item));
                //alert(JSON.stringify(NewsFeedList[index]));
            });
            //alert('after loop: ' + NewsFeedList);

        },
        error: function (jqXHR, errorThrown) {
            alert(errorThrown.stack);
        }
    }),
    $.ajax({
        url: UpdatesUrl,
        beforeSend: function () {
            //alert('UpdatesUrl berfore send by Boda');
            sleepFor(350);
        },
        headers: {
            'accept': 'application/json;odata=verbose',
            'content-type': 'application/json;odata=verbose'
        },
        success: function (data) {
            //alert('UpdatesUrl done');
            $.each(data.d.results, function (index, item) {
                updates.push(G_G.GetUpdateObject(item));
                //alert(JSON.stringify(updates[index]));
            });
            //alert('after loop: ' + updates);
        },
        error: function (jqXHR, errorThrown) {
            alert(errorThrown.stack);
        }
    })).then(function () {
    /*                alert("got 'ya all :D");
                    alert(NewsCategoryList);
                    alert(NewsFeedList);
                    alert(updates);*/
    SaveUpdatesToLocalstorage(updates);
    NewsCategoryReandering();
    SliderRendering(3);
}, function () {
    alert('some went wrong');
}).always(function () {
    alert('in always');
    myApp.closeModal('.popup-splash');
});

PS：sleepFor函数可以找到here。

Answer 3

以下使用每个请求的then()将数组返回到$.when承诺。

不同之处在于您控制着数据处理的顺序，使$.when在每个请求都返回之前无法完成。

每个请求本身可能以与调用它们不同的顺序完成，但$.when回调中的console.log将始终在处理请求本身之后，3个数组现在也显示为参数when回调

您使用success的方式无法确保正确的数据处理顺序与此方法相同

var firstReq=$.ajax({
    url: NewsCategoryUrl,    
    headers: {
        'accept': 'application/json;odata=verbose',
        'content-type': 'application/json;odata=verbose'
    }
}).then(function(data){
    $.each(data.d.results, function (index, item) {
        NewsCategoryList.push(G_G.GetNewsCategoryObject(item));
    }); 
    console.log('Process NewsCategoryList')
    // will be returned to `$.when.done()`
    return NewsCategoryList;
});

var secondReq= $.ajax({
    url: NewsFeedUrl,    
    headers: {
        'accept': 'application/json;odata=verbose',
        'content-type': 'application/json;odata=verbose'
    }
}).then(function (data) {    
    $.each(data.d.results, function (index, item) {
        NewsFeedList.push(G_G.GetNewsFeedObject(item));
    });    
    console.log('Process NewsFeedList');
    // return to $.when
    return NewsFeedList;    
});

var thirdReq = $.ajax({
    url: UpdatesUrl,    
    headers: {
        'accept': 'application/json;odata=verbose',
        'content-type': 'application/json;odata=verbose'
    }
}).then(function (data) {
    $.each(data.d.results, function (index, item) {
        updates.push(G_G.GetUpdateObject(item));
    });
    console.log('Process updates')
    return updates;
});


$.when(firstReq ,secondReq,thirdReq)
    // data in arguments is a result of each `then()` above
    .done(function (NewsCategoryList,NewsFeedList,updates ) {
    console.log('Start storage save and rendering')
    SaveUpdatesToLocalstorage(updates);
    NewsCategoryReandering();
    SliderRendering(3);
}).fail( function () {
    alert('some went wrong');
}).always(function () {
    alert('in always');
    myApp.closeModal('.popup-splash');
});

未定义的ajax异步调用没有警报（“”）

3 个答案: