停止AJAX通话

Question

To load my page, I have to make several AJAX POSTS in a particular order and I achieved this by using the .done() function:

$(document).ready(function(){
    // Load Recipients & documents
    $("#page").hide();
    $("#loading").show();

    // Specify the loading order
    load_recipients().done(function(){
        load_documents().done(function() {
            $.when( initialize() ).then(function() {
                var deferreds = [];
                page_list.forEach(function(page_id, index) {
                    deferreds.push(load_fields(page_id));
                });

                $.when.apply(null, deferreds).done(function() {
                    $("#page").show();
                    $("#loading").hide();
                });
            });
        });
    });
});

Now I am trying to implement error handling such that when an error is detected (by me or by HTTP error code) that the loading stops and an error message is displayed, however, I cannot figure out how to do that:

function load_recipients() {
    return $.ajax({
        url: base_url + "recipients/get/",
        type: "POST",
        data: { 
            packets_id : packets_id
        },
        success: function(response_data) {
            recipient_list = JSON.parse(response_data);
            if(recipient_list.hasOwnProperty('error')) {
                 // Make ALL functions stop and throw error message
            } else {
                console.log("Everything is fine");
            }
        },
        error: function(jqXHR){
            // Make ALL functions stop and throw error message
        }
    });
}

So far I've tried e.preventDefault(), .stop(), and stopPropogation() but none of them prevent the next AJAX POST from occurring. Does anyone have any suggestions as to how I can handle this?

Answer 1

You could create your own promise that you can resolve or reject yourself.

function load_recipients() {
    var promise = $.Deferred().promise();
    $.ajax({
        url: base_url + "recipients/get/",
        type: "POST",
        data: { 
            packets_id : packets_id
        },
        success: function(response_data) {
            recipient_list = JSON.parse(response_data);
            if(recipient_list.hasOwnProperty('error')) {
                 promise.reject();
            } else {
                promise.resolve();
            }
        },
        error: function(jqXHR){
            promise.reject();
        }
    });
    return promise;
}

As for handling rejections I believe $.when().then handles this.

https://api.jquery.com/deferred.then/

deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

doneFilter Type: Function() A function that is called when the Deferred is resolved.

failFilter Type: Function() An optional function that is called when the Deferred is rejected.