How organize asynchronous codes with Dojo?

Question

I am creating a webapp with dynamic TABs (data from RESTful) and each TAB has a dgrid, which I get the columns from a RESTful and the rows from a RESTful, as well. I made everything works well with XHR and MemoryStore, but I now need to change from XHR to JsonRest, because I need to pass to the server, a HTTP Range.

I am having dificulties to organize my code with Asynchronous calls in Dojo. I will give you an example:

method1() - Sync 
method2() - Async (JsonRest) 
method3() - Sync

What the best way for the method3() be executed, only after method2() is ready?

I have found a class called WHEN. It seems nice. But how do you work with Async apps in dojo?

My biggest problem now: I can't separate my codes by methods, I need put all my code inside the JsonRest's promise function(THEN). Because inside THEN I can't access another method.

Frederic Fortier · Accepted Answer · 2013-01-19T21:10:13.543

I would concur with the recommendation of using Dojo's promise implementation.

This might help you make some sense of it faster if you are not used to promises: http://jsfiddle.net/27jyf/9/. Another nice feature of this is error handling, I would encourage you to read on this after you have the basic sequencing down.

require(["dojo/Deferred", "dojo/when"], function(Deferred, when) {
    var sayHello = function() { return 'hello' };
    var sayWorld = function() {
        var deferred = new Deferred();        
        window.setTimeout(function() {
            deferred.resolve('world');
        }, 1000);        
        return deferred.promise;
    };
    var sayBang = function() { return '!' };

    //This will echo 'hello world !'
    //That's probably how you want to sequence your methods here
    var message = [];
    message.push(sayHello());
    sayWorld().then(function(part) {
        message.push(part);
        message.push(sayBang());
        console.debug(message.join(' '));
    });    

    //This will also echo 'hello world !'
    //This probably not the syntax that you want here, 
    //but it shows how to sequence promises and what 'when' actually does
    var message2 = [];
    when(sayHello())
    .then(function(part) {
        message2.push(part);
        return sayWorld();
    })
    .then(function(part) {
        message2.push(part);
        return when(sayBang());
    })
    .then(function(part) {
        message2.push(part);
        console.debug(message2.join(' '));
    }); 

    //Provided the behavior observed above, this will echo 'hello !'
    //dojo/when allows you to use the same syntax for sync and async... 
    //but it does not let you magically write async operations in a sync syntax
    //'world' will be pushed into the array a second later, after the message has already been echoed
    var message3 = [];
    message3.push(sayHello());
    when(sayWorld(), function(part) {
        message3.push(part);
    });
    message3.push(sayBang());
    console.debug(message3.join(' '));
});

note that JsonRest actually uses the promise API itself. So you can use var promise = myJsonRest.get(); promise.then(function(){/*my success behavior */}, function() {/*my failure behavior*/}); — Andrew, Jul 25 '13 at 18:22

score 1 · Answer 2 · answered Jan 19 '13 at 16:40

1

You can use the promise api to run async/sync methods in a specified order.

answered Jan 19 '13 at 16:40

limscoder

3,037
2
23
37

How organize asynchronous codes with Dojo?

2 Answers2