Return value from asynchronous OR synchronous JavaScript request

Question

The function below first performs a synchronous comparison test == 0, and if it passes, returns some content, and if it doesn't pass, performs an asynchronous request. My intent is for the later to return some other content such as "something from post callback", but know I am doing things way wrong. Without changing the Ajax request to synchronous, is it possible to do this?

var value = function (test) {
    if (test == 0) {
        return 'value is zero ';
    } else {
        return $.post('/echo/html/', {
            html: 'false ',
            delay: .5
        }, function (r1) {
            console.log('r1', r1);
            return 'something from post callback';
        })
            .done(function (r2) {
            console.log('r2', r2);
            return 'something from done callback';
        });
    }
}(1);

console.log(value);

https://jsfiddle.net/o5kq8he6/2/

Use callbacks or promises instead of a return value. – Sirko Apr 21 '15 at 17:44 — Sirko, Apr 21 '15 at 17:44

jfriend00 · Accepted Answer · 2015-04-21T17:52:03.347

Since you are already returning a promise from the ajax call, then from your synchronous comparison, just return a resolved promise. Then, both code paths return promises that are resolved with the terminal value and the caller can use the same code to process the result no matter which way it works internally. This is a common design pattern for code that is sometimes synchronous and sometimes asynchronous.

var myFunc = function (test) {
    if (test == 0) {
        return $.Deferred().resolve('value is zero ');
    } else {
        return $.post('/echo/html/', {
            html: 'false ',
            delay: .5
        }).then(function (r2) {
            console.log('r2', r2);
            // this will be the return value of the promise
            return 'something from ajax finished';
        });
    }
};

myFunc(1).then(function(value) {
    // value is here either way
});

FYI, it does not make sense in your $.post() to use both a success handler function AND a .done() handler. If you're going to return a promise from the function (which is my recommendation), then you should use only promise handlers, not the success callback.

You may also need to understand that it does nothing useful to return a value from the success handler of an ajax call. That return value just goes back into the asynchronous bowels of the ajax infrastructure and is never used by anything.

Based on http://stackoverflow.com/a/14220323/1032531, I thought that using `.done` effectively is a promise, right? How can the synchronous comparison return a promise? — user1032531, Apr 21 '15 at 17:46

arcyqwerty · Answer 2 · 2015-04-21T17:46:33.860

3

Make it all async:

var value = function (test, callback) {
    if (test == 0) {
        callback('value is zero ');
    } else {
        return $.post('/echo/html/', {
            html: 'false ',
            delay: .5
        }, function (r1) {
            console.log('r1', r1);
            callback('something from post callback');
        })
            .done(function (r2) {
            console.log('r2', r2);
            callback('something from done callback');
        });
    }
}(1, function(result) { console.log(result); } );

edited Apr 21 '15 at 17:46

answered Apr 21 '15 at 17:45

arcyqwerty

10,325
4
47
84

2

You should use the callback instead of the first return value as well. – Sirko Apr 21 '15 at 17:46

score 2 · Answer 3 · answered Apr 21 '15 at 17:45

You can simulate an async call for the others and then use a callback for all:

var value = function (test, callback) {
    if (test == 0) {
        callback('value is zero ');
    } else {
        return $.post('/echo/html/', {
            html: 'false ',
            delay: .5
        }, function (r1) {
            console.log('r1', r1);
            callback('something from post callback');
        })
            .done(function (r2) {
            console.log('r2', r2);
            callback('something from done callback');
        });
    }
}(1, myCallback);


function myCallback(result) {
   // here will the result be
}

You can also use setTimeout to actually make the sync calls behave as async calls in case you should need that.

Return value from asynchronous OR synchronous JavaScript request

3 Answers3

Linked