Server Lightning calls using promises

Question

EDIT:

I could not figured out how my code is different from the link you provided and the blog, is that possible to pinpoint what/where i'm doing wrong?

I'm trying to wrap my head around with promises and I have multiple serverside calls here is what I'm trying to figure out:

1. Only executes the second server call if the FOUND is true, for the sake of testing I have hard-coded the boolean value but in the real scenario I will be reading from server side.

Why I'm doing the conditional call? I don't want to hit the server if the first call returns false.

Here is what I have done so far:

Apex:

public class PromiseTestController {
    @AuraEnabled
    public static String serverSideCall1(String message ){
        return ' From Server serverSideCall1-->' +message ;
    }
    @AuraEnabled
    public static String serverSideCall2(String message ){
        return ' From Server serverSideCall2-->' +message ;
    }
     
}

Component:

<aura:component controller="PromiseTestController ">
    
    <aura:attribute name="serverSideCall1" type="String"  default="Not started" />
    <aura:attribute name="serverSideCall2" type="String"  default="Not started" />
     <ui:button label="PromiseChaining " press="{!c.promiseChaining}" />
    
     <div>
        {!v.serverSideCall1}
    </div>
   
    <div>
        {!v.serverSideCall2}
    </div> 
    
</aura:component>

Controller:

({
     
    promiseChaining : function(component, event, helper) {

        var found = false; //TESTING
        var exeAction = component.get("c.serverSideCall1");
        exeAction.setParams( {"message": 'Promise serverSideCall1'});
        helper.serverSideCall(component,exeAction).then(
            function(res) {
                  component.set("v.serverSideCall1" ,res ) ; //RETURN FROM SERVER...serverSideCall1
                if (found) {
                  var exeAction2 = component.get("c.serverSideCall2");
                  exeAction2.setParams( {"message": 'Promise serverSideCall2});
                  helper.serverSideCall(component,exeAction2).then (function (res) {;
                   component.set("v.serverSideCall2" ,res ) ; //RETURN FRO SERVER serverSideCall2
                })
                
            } 
        .catch(
            function(error) {
                component.set("v.status" ,error ) ; 
                console.log(error);
            }
        );
    },
    
    
})

Helper:

({
    serverSideCall : function(component,action) {
        return new Promise(function(resolve, reject) { 
            action.setCallback(this, 
                               function(response) {
                                   var state = response.getState();
                                   if (state === "SUCCESS") {
                                       resolve(response.getReturnValue());
                                   } else {
                                       reject(new Error(response.getError()));
                                   }
                               }); 
            $A.enqueueAction(action);
        });
    },
  
    
})

Answer 1

Your serverSideCall method looks fine (just like mine, for example). What you're missing is that you need to "return" the promise in order to continue the chain. The "then" blocks go on the outside in a proper chain (call().then(doMore).then(doEvenMore)). If you don't do it this way, the remaining calls will fizzle out. The following code is a modification of your own code. Of course, this won't directly chain (we haven't set found to true), but hopefully this demonstrates the solution.

({
    properPromiseChaining: function(component, event, helper) {
        var found = false;
        var exeAction = component.get("c.serverSideCall1");
        exeAction.setParams(({message:"Promise serverSideCall1"}));
        // This is the first promise
        helper.serverSideCall(
            component, exeAction
        ).then(
            // Result of first promise
            function(result) {
                component.set("v.serverSideCall1", result);
                if(found) {
                    var exeAction2 = component.get("c.serverSideCall2");
                    exeAction2.setParams({message:"Promise serverSideCall2"});
                    // We need to return the promise in order to chain it
                    return helper.serverSideCall(
                        component, exeAction2
                    );
                }
            }
        ).then(
            // This is the result of the second promise
            function(result) {
                component.set("v.serverSideCall2", result);
            }
        )
    }
})