Wrapping jQuery.ajax: Cascading inner jqXHR as a new deffered object to return

Question

I'm now developing on a jQuery plugin, and I want to make some pre-process operations before $.ajax sends:

// The signature is the same with $.ajax
$.myAjax = function(url, options) {


    var data = options.data;
    var promises = [];

    for(var name in data) {
        if(data.hasOwnProerty(name)) {
            var val = data[name];
            if(val instanceof File) {

                // I want to do some async pre-process here.
                var dfd = $.Deferred();

                var reader = new FileReader();
                reader.onload = function(e) {
                    data.name = e.target.result;
                    dfd.resolve();
                }
                reader.readAsText(val);

                promises.push(dfd.promise());
            }
        }
    }

    var deferred = $.Deferred();

    $.when.apply($, promises).done(function() {
        // In fact, I want to return, or wrap cascading this jqXHR
        //   in the outer function `$.myAjax`.
        var jqXHR = $.ajax(url, options).done(function(...) {
            // ??? If I want deferred to be a jqXHR like object, 
            // how to wrap the arguments here?
            deferred.resolve(/* Help to fill */); 
        }).fail(function(...) {
            deferred.reject(/* Help to fill */);
        });
    });

    // ** ATTENTION **
    // Here, I want to return a jqXHR compatible promise.
    // That is what I ask here.
    return deferred.promise();

}

And I want to return a Deferred object in myAjax, or more precisely speaking, a jqXHR object.

So that I can call, completely the same interface with a standard $.ajax method:

$.fn.myAjax({...}).done(function(data, textStatus, jqXHR) {
    // ...
}).fail(function(jqXHR, textStatus, errorThrown) {
    // ...
}) 
// .always ... etc.

Answer 1

If I correctly understand what you're trying to do, it can't be done. The problem is that your code returns from $.myAjax() before you've even created the jqXHR object so there's no way that the jqXHR object can be the actual return object from the $.myAjax() function call. You can make it accessible from the returned promise, but the returned promise is going to be a promise you create before the ajax call has even been started.

FYI, you have some promise anti-patterns in your code too, as you return $.ajax() from the $.when() handler rather than use another deferred you created. Returning a promise from within a .then() handler automatically chains that promise to the original.

---

Here's a cleaned up version of what you posted as your solution. Summary of changes:

1. Encapsulated the file reading into a local function to avoid declaring a function in a loop and to allow all core logic flow to just use promises rather than a mix of promises and callbacks (e.g. encapsulate the callbacks).
2. Added error handling to the file reader
3. Switched the deferred to the callback model (which std promises use)
4. Removed deferred anti-pattern and instead just return the ajax promise whcih will give you the resolve or rejected arguments from the ajax call as desired
5. Switched to .then() which has a more standard behavior and will not need to be changed when jQuery makes their promises standards compliant

The code:

// The signature is the same with $.ajax
$.myAjax = function(url, options) {

    function readFile(data, name) {
        var file = data[name];
        if (file instanceof File) {
            return $.Deferred(function(dfd) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    dfd.resolve(e.target.result);
                    data[name] = e.target.result;
                };
                reader.onerror = reader.onabort = dfd.reject;
                reader.readAsText(file);

            }).promise();
        }
    }

    var data = options.data;
    var promises = [];

    for(var name in data) {
        if(data.hasOwnProerty(name)) {
            promises.push(readFile(data, name));
        }
    }

    // trigger when all file fields was loaded.
    // so the data were all constructed.
    return $.when.apply($, promises).then(function() {
        return $.ajax(url, options);
    });
}

Answer 2

My own way to the solution finally:

Finally, I tried out making a deferred which resolveWith or rejectWith a same argument list of the jqXHR.done() and jqXHR.fail() signature.

The signature reference: http://api.jquery.com/jQuery.ajax/#jqXHR

jqXHR.done(function( data, textStatus, jqXHR ) {});

jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});

jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) {});

So the overall solution is:

// The signature is the same with $.ajax
$.myAjax = function(url, options) {

    var data = options.data;
    var promises = [];

    for(var name in data) {
        if(data.hasOwnProerty(name)) {
            var val = data[name];
            if(val instanceof File) {
                (function(name, val) {
                    // Deferred for a single field loaded.
                    var dfd = $.Deferred();
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        data[name] = e.target.result;
                        dfd.resolve();
                    }
                    reader.readAsText(val);
                    promises.push(dfd.promise());
                })(name, val);
            }
        }
    }

    // Overall deferred to cascading jqXHR from ajax.
    // with returning the same argument list.
    var deferred = $.Deferred();

    // resolveWith or rejectWith requires a context.
    // Thought from the jQuery ajax source code.
    var callbackContext = options.context || options;

    // trigger when all file fields was loaded.
    // so the data were all constructed.
    $.when.apply($, promises).done(function() {

        // ********** FINAL SOLUTION **********
        $.ajax(url, options).done(
          function(data, textStatus, jqXHR) {
            deferred.resolveWith(context, 
                [data, textStatus, jqXHR]); 
        }).fail(
          function(jqXHR, textStatus, errorThrown) {
            deferred.rejectWith(context, 
                [jqXHR, textStatus, errorThrown]);
        });
    });

    // So that the resulting promise is well constructed.
    return deferred.promise();

}

So, now we can use the $.myAjax function the same way with $.ajax:

var dfd = $.myAjax({
    url: '...',
    // ...
}).done(function(data, textStatus, jqXHR) {
    // triggered when the inner ajax done ...
}).fail(function(jqXHR, textStatus, errorThrown) {
    // triggered when the inner ajax fail ...
});