How to properly utilize jQuery Deferred/promise on auto-invoked function such as .ajax()'s beforeSend()?

问题

I'm working on extending jQuery's ajaxPrefilter interface to add additional functionality to AJAX calls; namely tacking header data onto the XHR request using setRequestHeader() within the beforeSend() method. The thing is, both the ajaxPrefilter and ajax call itself could contain beforeSend options, and one or both of them could contain async functionality.

Assume my ajaxPrefilter looks as such:

(function($) {
    $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
        var auth = $.cookie("fake_site"),
            normalizedRequest = $.Deferred();

        if (originalOptions.authorizeUser) {
            options.beforeSend = function() {
                jqXHR.setRequestHeader("Authorization", "Session " + auth);
            }

            // resolving the jqXHR Deferred, statusCode handling, etc.
        }

    });
})(jQuery);

Now, both options and originalOptions could contain beforeSend() methods, and I want options.beforeSend to ALWAYS execute first. This would seem like a prime candidate for Deferred/promise usage, but due to the fact that beforeSend is automatically invoked, I can't do this:

options.beforeSend = function(jqXHR) {
    // setting the request header; creating, resolving, and returning the Deferred
}

$.when(options.beforeSend(jqXHR)).then(function() {
    originalOptions.beforeSend();
});

As expected, this causes options.beforeSend to fire twice; both due to its definition statement and the $.when call.

How would Deferreds/promises be used to manage auto-invoked methods such as beforeSend?

回答1:

With regard controlling to what happens after a beforeSend callback, there are only two options :

return anything other than false to allow the request to proceed, or
return false to cancel the request.

You could indeed issue an ajax request within the callback but whatever is returned will cause the original (outer) ajax request to be issued issued immediately, or canceled. As the callback will complete and return unconditionally, it's not possible to make the outer ajax dependent on the inner by way of a deferred or otherwise.

For the effect you want, you could, within the callback, issue two ajax requests in cascade (the second being dependent on the first) and return false to cancel the original request.

One day, there might be some obscure reason why you might want to adopt this pattern but, if the original request is discarded unconditionally (by returning false), it would be nothing more than a convoluted way of achieving two ajax requests in cascade, not involving beforeSend, ie.:

$.ajax({
    //options
}).done(function() {
    $.ajax({
        //options
    }).done(function(){
        //do stuff here
    });
});

or the .pipe() equivalent.

In summary, it appears to be impossible make a jQuery ajax request dependent on another asynchronous action coded in its beforeSend callback, however the desired effect can be achieved by standard means not involving beforeSend.

回答2:

The following is a bit ugly but can globally handle restarting the original request, rather than nesting every single request. For example if you need a token and the token has expired, this example relies on a promise that's returned by a global api.getToken() function.

$.ajaxSetup({
  beforeSend: function(xhr,settings) {
    var newTokenNeeded = false;
    var originalSettings=settings;

        var promise = api.getToken().then(function(data){

            if(newTokenNeeded && typeof originalSettings.nested ==='undefined'){
                originalSettings.nested=true;//this flag is used to prevent infinite loops
                $.ajax(originalSettings);//here we re request the original, that we cancelled previously
            }else{
                xhr.setRequestHeader('Authorization', 'Bearer ' +data.t );
            }
        });
        if(promise.state()==='pending'){
            newTokenNeeded=true;
            return false; //returning false cancels the original request
        }
  }

});

来源：https://stackoverflow.com/questions/13943196/how-to-properly-utilize-jquery-deferred-promise-on-auto-invoked-function-such-as

标签

ajax

jquery

jquery-deferred