Simple way to only do processing when multiple Lightning Component Actions have completed?

Question

I am making two server calls, one to get the current data values and a second one to get metadata such as picklist options. The metadata action finishes second and using lightning:select it appears that only values that appear in the options can be set via the value attribute so the v.status value is lost. If I hard code the option values it works. The component looks like this:

<lightning:select value="{! v.status }" ...>
    <aura:iteration items="{! v.meta.Payment__c.Status__c.picklist }" var="option">
        <option text="{! option.label }" value="{! option.value }"/>
    </aura:iteration>
</lightning:select>

In AngularJS using promises $q.all allows multiple asynchronous operations to be waited for. In my example above, I would set both the value and the options at the same time when both requests had completed.

Is there a simple way to accomplish the same thing in Lightning Components?

PS

Just found via Google Using JavaScript Promises in the "Lightning Components Developer Guide" but that includes:

Don’t Use Storable Actions in Promises

The framework stores the response for storable actions in client-side cache. This stored response can dramatically improve the performance of your app and allow offline usage for devices that temporarily don’t have a network connection. Storable actions are only suitable for read-only actions.

Storable actions might have their callbacks invoked more than once: first with cached data, then with updated data from the server. This doesn't align well with promises, which are expected to resolve or reject only once.

I'm relying on the meta data action being storable so I can call its method in many places and only have the data queried from the server once...

PPS

As this is only affecting one value in my current component I've added this hack to the callback where the meta data is set which avoids the problem for now:

window.setTimeout(
    $A.getCallback(function() {
        var s = component.get("v.status");
        component.set("v.status", null);
        component.set("v.status", s);
    }), 0
);

Still interested in cleaner ways to handle the problem so please answer if you have any ideas.

Answer 1

In our implementation as well, we needed the data from sobject as well as picklist metadata for the same component. what we did was we created a Map in server and returned that to the client side controller. It would look like below

  map<String,object> mapStrObjs = new map<String,object>();

So my first key would be the data object and the second key would be the picklist metadata and so forth.

So in a single server call i get both the information.In client side then i assign these to aura attributes and use that to render the component. This way we combine multiple server calls, get all data and return them back to client. Map is technically a javascript object when its rendered on the client side

Answer 2

We have used a different implmentation approach in our project but before i explain that just wanted to check with you on why would you need 2 server calls?. Is it like 1 server call is dependant on the other?.