Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Communicating with Events
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Invoking Actions on Component Initialization
Sharing JavaScript Code in a Component Bundle
Sharing JavaScript Code Across Components
Using External JavaScript Libraries
Dynamically Creating Components
Detecting Data Changes with Change Handlers
Finding Components by ID
Working with Attribute Values in JavaScript
Working with a Component Body in JavaScript
Working with Events in JavaScript
Modifying the DOM
Checking Component Validity
Modifying Components Outside the Framework Lifecycle
Validating Fields
Throwing and Handling Errors
Calling Component Methods
Return Result for Synchronous Code
Return Result for Asynchronous Code
Dynamically Adding Event Handlers To a Component
Dynamically Showing or Hiding Markup
Adding and Removing Styles
Which Button Was Pressed?
Formatting Dates in JavaScript
Using JavaScript Promises
Making API Calls from Components
Create CSP Trusted Sites to Access Third-Party APIs
Using Apex
Lightning Data Service
Testing Components with Lightning Testing Service
Debugging
Fixing Performance Warnings
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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.

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.

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.

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.

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.

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.