1

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);
        });
    },
  
    
})
4
  • Hi Nick! I've actually already covered this in a previous question, and also posted something on my blog you can look at. If all this doesn't help, feel free to let me know, and I'll be more than happy to reopen your question for you.
    – sfdcfox
    Jul 4, 2020 at 0:16
  • @sfdcfox it will be helpful to know what/where i'm doing wrong in order for me to understand and I looked at the link and the blog but could not figured out what i'm doing wrong and it looks like i have the similar promise pattern
    – Nick
    Jul 4, 2020 at 1:02
  • @sfdcfox the link (salesforce.stackexchange.com/questions/204487/…) you provided does not have a full code and it's hard to understand what is going.
    – Nick
    Jul 4, 2020 at 1:13
  • I was already in the process of writing up an answer for you. Hopefully it'll be more clear to you and future readers.
    – sfdcfox
    Jul 4, 2020 at 1:23

1 Answer 1

0

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);
            }
        )
    }
})
1
  • thanks, I set the found=true and I see that it's not executing the last .then have you tried?
    – Nick
    Jul 4, 2020 at 1:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.