Return Result for Asynchronous Code

aura:method executes synchronously. Use the return statement to return a value from synchronous JavaScript code. JavaScript code that calls a server-side action is asynchronous. Asynchronous code can continue to execute after it returns. You can’t use the return statement to return the result of an asynchronous call because the aura:method returns before the asynchronous code completes. For asynchronous code, use a callback instead of a return statement.

Step 1: Define aura:method in Markup

Let’s look at an echo aura:method that uses a callback. We’ll use the c:auraMethodCallerWrapper.app and components outlined in Calling Component Methods. Here’s the echo aura:method in the c:auraMethod component.

1<!-- c:auraMethod -->
2<aura:component controller="SimpleServerSideController">
3    <aura:method name="echo"
4      description="Sample method with server-side call">
5        <aura:attribute name="callback" type="Function" />
6    </aura:method>
7    
8    <p>This component has an aura:method definition.</p>
9</aura:component>

The echo aura:method has an aura:attribute with a name of callback. This attribute enables you to set a callback that’s invoked by the aura:method after execution of the server-side action in SimpleServerSideController.

Step 2: Implement aura:method Logic in Controller

The echo aura:method invokes echo() in auraMethodController.js. Let’s look at the source.

1/* auraMethodController.js */
2({
3    echo : function(cmp, event) {
4        var params = event.getParam('arguments');
5        var callback;
6        if (params) {
7            callback = params.callback;
8        }
9
10        var action = cmp.get("c.serverEcho");
11        action.setCallback(this, function(response) {
12            var state = response.getState();
13            if (state === "SUCCESS") {
14                console.log("From server: " + response.getReturnValue());
15                // return doesn't work for async server action call
16                //return response.getReturnValue();
17                // call the callback passed into aura:method
18                if (callback) callback(response.getReturnValue());
19            }
20            else if (state === "INCOMPLETE") {
21                // do something
22            }
23            else if (state === "ERROR") {
24                var errors = response.getError();
25                if (errors) {
26                    if (errors[0] && errors[0].message) {
27                        console.log("Error message: " +
28                          errors[0].message);
29                    }
30                } else {
31                    console.log("Unknown error");
32                }
33            }
34        });
35        $A.enqueueAction(action);
36    },
37})

echo() calls the serverEcho() server-side controller action, which we’ll create next.

You can’t return the result with a return statement. The aura:method returns before the asynchronous server-side action call completes. Instead, we invoke the callback passed into the aura:method and set the result as a parameter in the callback.

Note

Step 3: Create Apex Server-Side Controller

The echo aura:method calls a server-side controller action called serverEcho. Here’s the source for the server-side controller.

1public with sharing class SimpleServerSideController {
2    @AuraEnabled
3    public static String serverEcho() {
4        return ('Hello from the server');
5    }
6}

The serverEcho() method returns a String.

Step 4: Call aura:method from Parent Controller

Here’s the controller for c:auraMethodCaller. It calls the echo aura:method in its child component, c:auraMethod.

1/* auraMethodCallerController.js */
2({    
3    callAuraMethodServerTrip : function(component, event, helper) {
4        var childCmp = component.find("child");
5        // call the aura:method in the child component
6        childCmp.echo(function(result) {
7            console.log("callback for aura:method was executed");
8            console.log("result: " + result);
9        });
10    },
11})

callAuraMethodServerTrip() finds the child component, c:auraMethod, and calls its echo aura:method. echo() passes a callback function into the aura:method.

The callback configured in auraMethodCallerController.js logs the result.

1function(result) {
2    console.log("callback for aura:method was executed");
3    console.log("result: " + result);
4}

Step 5: Add Button to Initiate Call to aura:method

The c:auraMethodCaller markup contains a lightning:button that invokes callAuraMethodServerTrip() in auraMethodCallerController.js. We use this button to initiate the call to the aura:method in the child component.

Here’s the markup for c:auraMethodCaller.

1<!-- c:auraMethodCaller.cmp -->
2<aura:component >
3    <p>Parent component calls aura:method in child component</p>
4    <c:auraMethod aura:id="child" />
5    
6    <lightning:button label="Call aura:method (server trip) in child component"
7        onclick="{! c.callAuraMethodServerTrip}" />
8</aura:component>

Lightning Aura Components Developer Guide