我错误地使用.done（），没有按预期返回值

Question

I am trying to use jQuery's AJAX deferreds to return a JSON string that can be parsed and used but I have coded myself into a corner and may have screwed up the logic. I expected the results of the AJAX call to be returned in the .done() callback and they are . I thought once done that I could return the result for use in the remainder of the function. I know that I'm missing something really obvious and simple, I just cannot put a finger on what it is.

Here is the initial coding of the function, stil very much in test mode. The JSON is correctly returned in the .done() function but I cannot assign it outside of the function for use.

checkUserRoles = function(){
    var userRole, foo, roles, i$, len$, i;
    userRole = roleChecker();
    foo = userRole.done(function(data){
        var bar;
        bar = foo.responseText; // correctly returns the JSON data
        console.log(bar);
        return bar; //  is undefined, this is the problem
    });
    if (userRole !== false) {
        userRole = jsonDecode(userRole);
    } else {
        userRole = "";
    }
    roles = userRole.split(',');
    $("if-user-role").hide();
    for (i$ = 0, len$ = roles.length; i$ < len$; ++i$) {
        i = roles[i$];
        $("if-user-role[data-role~=" + i + "]").show();
    }
    return true;
};
this.roleChecker = function(){
    var retVal, allCookies, i$, len$, thecookie, hashedCookie, theHash, userHash, post;
    retVal = "";
    allCookies = document.cookie.split(';');
    for (i$ = 0, len$ = allCookies.length; i$ < len$; ++i$) {
        thecookie = allCookies[i$];
        if (thecookie.indexOf('userHash') >= 0) {
            hashedCookie = thecookie;
            theHash = hashedCookie.split('=');
            userHash = theHash[1];
        }
    }
    post = $.ajax({
        url: '/services/check_hash.php',
        data: {
            hash: userHash
        },
        type: "POST"
    });
    return post;
};

The code that you see here is the output from the compiling of LiveScript which we use extensively. I don't think the LiveScript is having an effect on the final result, I just had to do a lot to get what I expected would be the proper JavaScript / jQuery output.

NOTE : because this is more or less the first pass at the code foo doesn't get passed along to the subsequent if statement as userRole was originally hard-coded for the initial testing prior to trying to make the function more dynamic.

How do I return foo.responseText or bar for use in the subsequent procedure? Do I need to put the procedure, beginning with the if conditional in the .done() function?

Answer 1

You're looking for .then and not .done .

What .done does is perform an action and return the same promise . On the other hand then returns a new promise which is resolved with the return value of the callback provided to it. (Assuming the $.ajax resolved correctly).

You of course then need to place everything you subsequently do in the chain:

userRole.then(function(data){
    var bar;
    bar = foo.responseText; // correctly returns the JSON data
    console.log(bar);
    return bar;
}).then(function(role){;
  if (role != false) {
    role = jsonDecode(userRole);
  } else {
    userRole = "";
  }
//...
  return true;
});

You should also return that promise to hook on it later.

Answer 2

It looks like you are using deferred objects synchronously, which (as you mentioned in your title) is not the intended purpose. The code that you process the user data with after .done() will execute immediately after registering that handler, so your data won't be ready yet.

When you register a .then() on a deferred promise, you're telling your program to run a piece of code after the deferred object has either resolved or rejected. The program will not wait until that deferred object has resolved or rejected, it will continue processing code (which is the beauty of the deferred object system!)

Example:

var checkUserRoles = function () {
    var userRole = roleChecker();

    // go off and find the user data
    // but *don't wait for it before continuing code execution*
    userRole.then(function(data){

      // at this point the AJAX request has finished, and we have the data
      console.log(data);

      // put code to process the user data here
    });

    // code here is executed immediately after registering the .then handler
    // so the user data has not loaded yet
};

var roleChecker = function () {
    var defer = $.Deferred();
    var post = defer.promise();

    // simulate an AJAX Request, returns after 2 seconds
    setTimeout(function () {
      defer.resolve('user data here!');   
    }, 2000);

    return post;
};

checkUserRoles();