Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

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