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})
}

かなりすっきりします。