Synchronous acces to a structure filled by an asynchronous request

Question

I am trying to provide a dictionary of status values to an application implemented in JS/jQuery. The values have to be fetched from a server (ajax). I want to do that in an asynchronous way, so that I can start that request during initialization. The actual access to the values should be done synchonously later to keep the code easy to understand. The (much) simplified code currently looks like this:

Initialization:

$(document).ready(function(){
    Status.fetch();
})

Structure:

Status:{
    Valid:new $.Deferred(),
    Server:{},
    /* ... */
    fetch:function(){
        if (Status.Valid.isResolved()){
            // status already present due to a past request
            return Status.Valid.promise();
        }else{
            // fetch status information from server
            $.ajax({
                type:     'GET',
                url:      'status.php'),
                cache:    true,
                dataType: 'json'
            }).done(function(response){
                $.each(response,function(key,val){
                    Status.Server[key]=val;
                });
                Status.Valid.resolve(Status.Server);
            }).fail(function(response){
                Status.Valid.reject(NaN);
            });
            return Status.Valid.promise();
        }
    }, // Status.fetch
    getServerAspect:function(aspect){
        $.when(
            Status.fetch()
        ).done(function(server){
            return server[aspect];
        }).fail(function(server){
            return NaN;
        })
        /* whyever: processing always comes here, which I don't understand... */
    }, // Status.getServerAspect
} // Status

Status.Server gets filled by the ajax call (which works). Status.getServerAspect() is an example for a method to allow synchronous access to the aspects stored inside the Status.Server structure (which does not work).

The basic idea is that the asynchonous filling of the structure runs before the structure is accessed. Every (synchronous) access is meant to either returned the referred aspect right away or block until that value is present. But whatever style I try inside Status.getServerAspect(), the method returns right away without any aspect value I can use in the calling scope.

I obviously have a problem to understand the basic concept of working with deferred objects. I use them for synchronous processing all the time, works like charm. But that means that you have to use asynchronous style throughout your appliciation. For this special feature I prefer an synchronous style, so that conditional expressions stay simple:

if ('somevalue'==Status.getServerAspect('someaspect'))
    ...do something...

What is the trick to build a 'bridge' between asynchronous and synchronous handling?

Answer 1

This will work, as the setTimeout(...) call (while asynchronous) merely makes sure that the Status.Valid.state(); call isn't performed all that often. It is still a busy wait which will not only block the thread (and hence, should not be done outside of a WebWorker) but also steal idle time from your CPU. In fact, instead of using this approach, going for a synchronous AJAX request is the better solution. While blocking for the caller, it will not be a busy wait. However if you can, you should still go for a purely asynchronous implementation.

Answer 2

Make getServerAspect simply return the promise, then use it.

getServerAspect: function(){
    return Status.Valid.promise();
}

now you can use it with:

Status.getServerAspect().done(function(data){
    if (data.someaspect == 'somevalue') {
        // do something, but don't return!
    }
})

This is how asynchronous code works.

You can also abstract this behind a function, but i find it harder to read.

Status.getServerAspect: function(aspect,callback){
    Status.Valid.promise().done(function(data){
        callback(data[aspect]);
    })
}

now you can use it like:

Status.getServerAspect('someaspect',function(value) {
    if ( 'somevalue' == value ) {
        // do something but don't return!
    }
});

Answer 3

It's hard to call an asynchronyous process and try to make it synchronyous, the easiest way is to split up your functions in 2 parts; one before the asynch call and one after.

The best way I found is to use promise pattern or you could try a mediator and pass it a series of events to be triggered by every step of your process:

Good pattern to use for multiple xmlhttprequests used by different processes

JavaScript doesn't really have a function for pause or wait like some other languages as far as I know.

Answer 4

in an $.ajax request you can set an async property to true or false, or pass it into your function

     $.when(
     Status.fetch(true)

Example see below

        Status:{
          Valid:new $.Deferred(),
           Server:{},
           /* ... */
          fetch:function(asyncType){      /// boolean passed as param
             if (Status.Valid.isResolved()){
             // status already present due to a past request
             return Status.Valid.promise();
             }else{
            // fetch status information from server
        $.ajax({
            type:     'GET',
            url:      'status.php'),
            cache:    true,
            dataType: 'json',
            async: asyncType /////// will be true or false
        }).done(function(response){
            $.each(response,function(key,val){
                Status.Server[key]=val;
            });
            Status.Valid.resolve(Status.Server);
        }).fail(function(response){
            Status.Valid.reject(NaN);
        });

Answer 5

I want to share the solution i finally found. It is not an elegant thing but nevertheless it answers the original question in a positive manner. Thus it offers an approach for the combination of asynchronous and synchronous access as requested.

I think it makes sense to add this answer, since all other contributors claimed that this is not possible at all.

All that is required is to implement a blocking routine that makes sure the requested value is only returned when the asynchronously retrieved data structure is available. So no magic here, just a simply 'waiting' strategy in the end:

getServerAspect:function(aspect){
    /* the state of the asynchronous retrieval attempt */
    var resolution=Status.Valid.state();
    while ("pending"==resolution) {
        setTimeout(function(){resolution=Status.Valid.state();},500);
    }
    /* asynchronous retrieval has finished */
    if ("resolved"==resolution){
        /* return vaule should be available */
        return server[aspect];
    }else{
        /* data could not be retrieved, something is borked */
        return NaN;
    }
}, // Status.getServerAspect

[ This function is simplyfied and written from memory, since my real world solution is more complex. ]

Indeed the function blocks the gui whilst it is waiting for the resolution. This is not elegant, true, but please note that in the original a blocking behaviour is explicitly asked for. Under normal circumstances the retrieval should long have been finished bfore a server aspect is requested, so "normally" there is no blocking. And for those situation where this is not the case I prefer to wait for half a second, since even in an asynchronous handling the final action would be delayed until the retrieval has finished.

This blocking strategy allow me to keep the rest of the code much more simple and more easy to read, since I do not have to use anonymous functions all the time. Instead I can simply access values in a simple conditional statement:

if ("expected"==Status.getServerAspect('someaspect')){
    /* do something */
}