Lightning Component - promise returned before Apex method is completed

Question

I'm developing a component that calls an Apex method which performs a callout to our integration platform (generates an SAP customer from a salesforce account). The component is a button placed on the account record page; when clicked (and user confirms) it's supposed to wait for a response from the integration. The strange thing is that the first time the button gets clicked, seems to work fine (spinner goes off and then a toast is displayed upon completion), however if I click it again, the toast appears before the callout is completed (I can tell this because the integration process console shows me it's still running). I'm pretty sure I have my promises set up correctly, can anyone tell me what seems to be missing? Apex:

public with sharing class GenerateSAPCustomerAura_Ctrl {
    @AuraEnabled (cacheable=true)
    public static String generateSAPCustomer(String recordId){
        String responseJson = IicsRestUtility.GenerateSAPCustomer(recordId);
        return responseJson;
    }
}

(IicsRestUtility is a utility class that handles the HttpRequest/HttpResponse stuff)

relevant part of the controller:

    handleConfirm : function(component,event,helper){
        helper.generateSAPCustomer(component,helper);
    },

helper:

    callApex : function( component, helper, apexAction, params ) {
        // generic server side method call function.  returns a promise
        return new Promise($A.getCallback(function(resolve, reject){ 
            var action = component.get("c." + apexAction + "");
            action.setParams(params);
            action.setCallback(this, function(callbackResult) {
                if (callbackResult.getState() == 'SUCCESS'){
                    resolve({"c":component, "h":helper, "r" :callbackResult.getReturnValue()});
                }
                if (callbackResult.getState() == 'ERROR'){
                    reject({"c":component, "h":helper, "r" :callbackResult.getError()});
                }
            });
            $A.enqueueAction(action);
        }));            
    },
    generateSAPCustomer : function(component,helper) {
        component.set("v.processing",true);
        component.set("v.response","Processing Request...");
        var recId = component.get("v.recordId");
        this.toggleSpinner(component);
        this.callApex(component, helper, "generateSAPCustomer",{recordId : recId})
        .then(
            $A.getCallback(function(retVal){
                const msg = JSON.parse(retVal.r);
                const cmp = retVal.c;
                const hlp = retVal.h;
                hlp.toggleSpinner(cmp);
                if(typeof(msg.response.REMARKS) !== "undefined"){
                    cmp.set("v.response",msg.response.REMARKS);
                }
                if ((typeof(msg.response.SAP_CUSTOMER_NO) !== "undefined") 
                    && !(msg.response.SAP_CUSTOMER_NO === null)
                ){
                    var toastEvent = $A.get("e.force:showToast");
                    toastEvent.setParams({
                        "title": "Success",
                        "message": msg.response.REMARKS + " SAP Id: " + msg.response.SAP_CUSTOMER_NO,
                        "type": "success",
                        "mode": "sticky"
                    });
                    toastEvent.fire();      
                } else {
                    var toastEvent = $A.get("e.force:showToast");
                    toastEvent.setParams({
                        "title": "Error",
                        "message": msg.response.REMARKS,
                        "type": "error",
                        "mode": "sticky"
                    });
                    toastEvent.fire();      
                    console.error("generateSAPCustomer error: " + JSON.stringify(msg));
                }
                hlp.resetDivs(cmp);
                $A.get('e.force:refreshView').fire();
            })
        ).catch(
            $A.getCallback(function(error){
                console.error("generateSAPCustomer catch error: " + error);
                $A.reportError("There has been an unexpected error :( - " + error);
            })
        );
    },

the callApex function came from somewhere on the googles, and seems to work in other components I've used it in.

Thanks in advance.

Answer 1

This happens because cacheable=true. When you do this, the platform notices that there's already a cached response and uses that instead of waiting. It will then callback again later, but the promise will have already resolved (and they can't resolve multiple times!). Set cacheable=false to make sure that it waits until the process is finished. Or, if possible, you can set up the CSP (Content Security Policy) to allow direct access to that server, and you could call the server directly via fetch or XMLHttpResponse.