javascript - 如何处理这些异步函数(设计模式？)

Question

我有一个应用程序需要执行一些引导/启动，例如:

• Ajax
• 动态需求
• 路由，设置其他东西

在能够运行之前。

我现在很难以可靠的方式组织这些任务。特别是异步行为让我头疼。目前我正在使用事件来共享获取的结果并观察应用程序的状态。不幸的是，这导致了不便的废话。然后我尝试使用一些 promises 库，例如 q、jquery.defered，但它们并不真正符合我的问题。

这是代码的简化版本:

// 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);
};​

也可在以下位置查看: http://jsfiddle.net/uzJrs/3/

我希望这描述了我的问题:

共有三个完全不同的异步任务。当它们都准备就绪时，它们的结果必须合并并以某种方式传递给另一个对象。

事件使它可行，但远非可以理解， promise 也并不能真正让我开心。 难道没有另一种有用的设计模式吗？

Answer 1

首先，因为你已经有了 requirejs，你可以用它来加载你的三个模块。 Requirejs 异步和并行地解决依赖关系，并在它们加载时调用最终的工厂函数。

但是，每个 Deferred 库也提供了合并 promises 的功能:合并的 promises 在所有单个 promises 都被解析时解析，或者如果其中一个被拒绝则被拒绝。各自的功能是Q.all和 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"
});