How to handle these async functions (design-pattern?)

Question

I got an application which needs to execute some booting/startup like:

• ajax
• dynamic requirejs
• routing, set up something else

before able to run.

I now got difficulties organizing these tasks in a solid way together. Especially the async behavior is giving me headache. Currently I am using events to share fetched results and watch the state of the application. Unfortunately this resulted in enological, inconvenient crap. Then I tried using some promises libraries like q, jquery.defered but they don't really match my problem.

This is a simplified version of the code:

// this could be an ajax call fetching some user data
var fetchUser = function() {
    var user = {};
    // lets emulate the ajax call with setTimeout
    setTimeout(function() {
        // set some values
        user.username = 'bodo';
        user.password = 'helloKitty';
        // return the user object we "fetched"
        return user;
    }, 300);
};

// this could fetch some config or some requirejs modules
var fetchConfig = function() {
    var config = {};
    // we emulate this too...
    setTimeout(function() {
        return config;
    }, 200);
};

// this could be anything else like setting up some objects
var justSetUpSomething = function() {
    var someObj = {};
    someObj.router = 'this could be a router object for example';
    someObj.logger = 'or a logger';
    return someObj;
};

// in the final step everything should be merged together
// and be passed as event argument
var finalStep = function(user, config, someObj) {
    var mainObj = {};
    mainObj.user = user;
    mainObj.config = config;
    mainObj.someObj = someObj;
    // trigger some event system
    trigger('everything:ready', mainObj);
};​

Also viewable at: http://jsfiddle.net/uzJrs/3/

I hope this describes my problem:

There are three totally different, async tasks. When they all a ready their results have to get merged and somehow passed to another object.

Events make this workable but far a way from understandable and promises also don't really make me happy. Isn't there another helpful design pattern?

Answer 1

At first, as you have requirejs already there, you can use it to load your three modules. Requirejs resolves the dependencies asynchronous and in parallel, and calls the final factory function when they're loaded.

But, also every Deferred library offers functions to merge promises: The merged one resolves when all single ones are resolved, or becomes rejected if one of them is rejected. The respective functions are Q.all and jQuery.when:

function fetchX() {
    var d = new $.Deferred();
    asynchronousThing(function callback(x) {
        d.resolve(x);
    });
    return d.promise();
}
$.when(fetchX(), fetchY(), …).then(function finalStep(x, y, …) {
    // merge everything together
    return new Event();
}).done(function readyCallback(e) {
    // this is effectively your 'everything:ready' "event"
});

Answer 2

It sounds like the majority of your functionality is actually synchronous as long as the dependencies are resolved (i.e. config and someObj don't do anything asynchronous they simply might be loaded asynchronously. If you are using require.js have you tried simply using its functionality to make the require calls synchronous from your code's perspective by using define? Then you only have to worry about the call which has to be asynchronous (fetchUser).

// In app/main.js perhaps?
define(["data/user",
            "app/config",
            "app/someObject",
            "app/events"], 
    function(user, config, someObj, eventBus) {
        // By the sound of it config and someObj are ready once loaded
        var mainObj = {"config": config, "someObj": someObj};
        eventBus.register_once("data:user:loaded", function(user) {
            mainObj.user = user; 
            eventBus.trigger("everything:ready", mainObj);
        });
        user.fetchUser()
});

// in data/user.js
define(["app/config", "app/events", "vendor/jquery"],
    function(config, eventBus, $) {
        function user_loaded(user) {
            eventBus.trigger("data:user:loaded", user);
        }
        function fetchUser() {
            $.get(config.dataendpoint + "/user/1", user_loaded);
        }
    return {"fetchUser": fetchUser};
});