Javascript Remoting で async/await を使ってみる

Visualforce 開発における非同期通信とコールバック

javascript の開発において、非同期処理の実装によるコールバック地獄は免れませんよね。
Visualforce 開発においても Javascript Remoting や Remote Object などの非同期処理によるサーバー通信の仕組みがありますが、開発を進めるにつれどうしてもコードを複雑化してしまう要素になります。

Promise と Async/Await

この複雑性を解消するために、javascript 開発では一般的に Promise オブジェクトが使われるかと思います。
また、最近では Async 関数なる物が出てきて非同期処理をとても簡潔にわかりやすく記述することが出来るようになりました。
Visualforce の開発においても、これらの機能を利用する事が出来る(ブラウザや環境によって異なる)ので、可読性や保守性改善の手法として利用を検討してみましょう。

Javascript Remoting で Async/Await 例

Async 関数を使用して、 Visualforce の Javascript Remoting で 取引先のリストを取得する Apex コントローラーのメソッドを呼び出すというシンプルなコードの例です。

AsyncAwaitSample.vfp

<apex:page controller="AsyncAwaitSampleController">
    <script>
    (async () => {
      let accountList = await getAccountList().catch(err => {console.error(err.message); });
      if (accountList) { // エラー時は undefined となるので注意
        console.log(accountList);
      }
    })();

    const REMOTEACTION_OPTIONS = {buffer: true, escape: true, timeout: 120000};
    function getAccountList() {
      return new Promise((resolve, reject) => {
        Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.AsyncAwaitSampleController.getAccountList}',
          (result, event) => {
            if (event.status) resolve(result);
            else reject(event);
        }, this.REMOTEACTION_OPTIONS); // アロー関数を使う場合は this を忘れずに
      });
    }
    </script>
</apex:page>

AsyncAwaitSampleController.apxc

public class AsyncAwaitSampleController {
    @RemoteAction
    public static List<Account> getAccountList() {
        return [SELECT Id, Name FROM Account];
    }
}

これにより、複雑なコードの記述も楽になりますね。