Lightning Web ComponentsのApexクラス呼び出し方法

Lightining Web Componentsで、Apexクラスを呼び出すときに、気を付けることがあります。

Apexクラスは非同期だと言うこと、Promiseで結果が返ってくると言うことです。

これを、ソースコードで説明すると以下のようになります。

import ApexMethod from '@salesforce/apex/ApexClass.ApexMethod';

handleOKClick(event) {
    // Apexクラスのメソッドを呼び出す
    ApexMethod({param: 1})
    .then((result) => {
        // Apexクラスメソッド呼び出し結果が返ってきたときの処理
    })
    .catch((error) => {
        // エラー処理
  });
}

Apexクラスの呼び出しが1回で終わるとこれでいいかもしれません。

では、3つのApexMethodを呼び出す必要がある場合はどうでしょう?

import ApexMethod1 from '@salesforce/apex/ApexClass.ApexMethod1';
import ApexMethod2 from '@salesforce/apex/ApexClass.ApexMethod2';
import ApexMethod3 from '@salesforce/apex/ApexClass.ApexMethod3';

handleOKClick(event) {
    // Apexクラスのメソッドを呼び出す
    ApexMethod1({param: 1})
    .then((result1) => {
        // ApexMethod1の呼び出し結果が返ってきたときの処理
        // Apexクラスのメソッドを呼び出す
        ApexMethod2({param: 2})
        .then((result2) => {
            // ApexMethod2の呼び出し結果が返ってきたときの処理
            // Apexクラスのメソッドを呼び出す
            ApexMethod3({param: 3})
            .then((result3) => {
                // ApexMethod3の呼び出し結果が返ってきたときの処理
            })
            .catch((error2) => {
                // エラー処理
           });
        })
        .catch((error2) => {
            // エラー処理
       });
    })
    .catch((error1) => {
        // エラー処理
  });
}

どうでしょう?大変な感じがしませんか?

Apexクラス側で工夫するというのも一つの手段です。

これをLightning Web Componentsだけですっきりさせる方法があります。

Promiseで返ってくると言うことは、非同期関数の中で待ち合わせてもいいと言うことです。

つまり、async関数の中で、awaitしても同じ結果になると言うことです。

先ほどの処理を、async/awaitで書き直してみます。

import ApexMethod1 from '@salesforce/apex/ApexClass.ApexMethod1';
import ApexMethod2 from '@salesforce/apex/ApexClass.ApexMethod2';
import ApexMethod3 from '@salesforce/apex/ApexClass.ApexMethod3';

async handleOKClick(event) {
    // Apexクラスのメソッドを呼び出す
    const result1 = await ApexMethod1({param: 1});
    const result2 = await ApexMethod2({param: 2});
    const result3 = await ApexMethod3({param: 3})
}

かなりすっきりします。