この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

非同期コードの結果を返す

aura:method は同期して実行されます。同期 JavaScript コードから値を返すには、return ステートメントを使用します。サーバ側のアクションをコールする JavaScript コードは非同期です。非同期コードは返した後も実行を続けることができます。aura:method は非同期コードが終了する前に返すため、return ステートメントを使用して、非同期コールの結果を返すことはできません。非同期コードの場合は、return ステートメントではなくコールバックを使用します。

ステップ 1: マークアップで aura:method を定義する

コールバックを使用する echo aura:method を見てみましょう。c:auraMethodCallerWrapper.app および「コンポーネントメソッドのコール」に示されたコンポーネントを使用します。c:auraMethod コンポーネントの echo aura:method は次のようになります。

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="Object" />
6    </aura:method>
7    
8    <p>This component has an aura:method definition.</p>
9</aura:component>

echo aura:method には、名前が callback の aura:attribute があります。この属性を使用して、SimpleServerSideController でサーバ側のアクションを実行��た後に、aura:method によって呼び出されるコールバックを設定できます。

ステップ 2: コントローラで aura:method ロジックを実装する

echo aura:method で、auraMethodController.js の echo() を呼び出します。ソースを見てみましょう。

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() でサーバ側コントローラアクション serverEcho() をコールします。これは次に作成します。

return ステートメントで結果を返すことはできません。aura:method は、非同期のサーバ側アクションコールが終了する前に返します。代わりに、aura:method に渡されたコールバックを呼び出して、コールバックのパラメータとして結果を設定します。

メモ

ステップ 3: Apex サーバ側コントローラを作成する

echo aura:method で、serverEcho というサーバ側コントローラアクションをコールします。サーバ側コントローラのソースは次のようになります。

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

serverEcho() メソッドは String を返します。

ステップ 4: 親コントローラから aura:method をコールする

c:auraMethodCaller のコントローラは次のようになります。その子コンポーネント c:auraMethod で、echo aura:method をコールします。

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() は子コンポーネント c:auraMethod を検索し、その echo aura:method をコールします。echo() で、コールバック関数を aura:method に渡します。

auraMethodCallerController.js で設定されたコールバックで結果を記録します。

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

ステップ 5: aura:method へのコールを開始するボタンを追加する

c:auraMethodCaller マークアップには、auraMethodCallerController.js の callAuraMethodServerTrip() を呼び出す lightning:button が含まれます。このボタンを使用して、子コンポーネントの aura:method へのコールを開始します。

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 コンポーネント開発者ガイド