Velo 第２７回　非同期処理とasync/await

2023年9月14日 19:33

第13回の続編です。
サーバーとの通信には非同期処理が必要ですが、その中でもコレクション関係を担う wixData API のコーディングは基礎・基本となります。
非同期処理は正しくコードを書かないと、undefined ばかりが返ってくる悲しい結果になります。

Velo のコレクションに対する CRUDプロセスは、insert( )、save( )、get( )、update( )、remove( )ですが、戻り値は当然全てプロミスになっています。Velo API Reference に掲載のコードをご覧下さい。

import wixData from 'wix-data';

let toInsert = {"title": "Mr.", "first_name": "John"};
wixData.insert("myCollection", toInsert).then((item) => {console.log(item)})

let toUpdate = {"_id": "00001", "title": "Mr.", "first_name": "John"};
wixData.update("myCollection", toUpdate).then((results) => {console.log(results)})

各メソッドの戻り値はプロミスなので.then( )で非同期処理をしています。
この then( ) の戻り値もプロミスですので、さらにさせたいことがあればthen( )をチェーンしていきます。Promise.then( ).then( ). …　となりますからプロミスチェーン、プロミスデンデンと言います。

この書き方が標準ですが、コールバックが入れ子になったり、戻り値を書き忘れたり等、通常のコードとは少し違うので、代わりに async/await キーワードを使う人も多いです。
Wix アドボケーターのジョシュアも WixLeranでasync/await が Syntatic Sugar で好きだと言っています。
このキーワードを使えば then( ) メソッドを使わず、通常のコード環境で非同期処理ができますので非同期処理の糖衣構文となります。

import wixData from 'wix-data';

let toInsert = {"title": "Mr.", "first_name": "John"};
// 非同期関数を実行します
insertData(toInsert);

// async キーワードを使い非同期関数を定義します
async function insertData(data){
　　　// await キーワードを使い右辺のプロミスの解決を待ちます
      const item = await wixData.insert("myCollection", data);
　　　// 解決された戻り値の item をコンソールに出力します
      console.log(item)
}

await キーワードは文字通り「プロミスの解決を待て」と言うことです。
その間コードは先に進まずひたすら解決を待ちます。プロミス P が解決した場合、その戻り値を変数 result に代入する構文は let result = await P ; となります。
戻り値がなく単にプロミスの解決を待つだけなら await P ; となります。

ところが await キーワードを使えるのは async キーワードを使って定義された関数の内部でのみです。
async 関数は、await の戻りを待たないと先に進まない関数なので戻り値はもちろんプロミスです。
上の例では insertData( ) がそれに相当します。

構文的には async 関数の宣言はプロミスPに対して、
●「async function 関数名(引数){ … await P ; … }」となります。
またアロー関数でasync 関数を宣言する場合は、
●「async ( 引数 ) => { … await P ; … }」となります。
イベントホルダーでasync 関数を宣言する場合は、
●「export async function 関数名(引数){ … await P ; … }」となります。
要は、async 関数の環境の中でプロミスに出会うたびに await キーワードを使うだけです。
通常のコードの書き方と何も変わりません。

Wix のデータセットには onReadyAsync( )メソッドが用意されています。
これはデータセットがスタンバイしたときにプロミスが解決されるメソッドです。
以下のコードをご覧下さい。

// ページの初期化後、アロー関数のコールバックに async 関数の宣言をします。
$w.onReady(async () => {
　　// データセットの準備を待ちますが、戻り値はないので await P の構文です
  　await $w('#myDataset').onReadyAsync();
    // 準備が整ったのでアイテムを取得します
  　let currentItem = $w('#myDataset').getCurrentItem();
　　// 取得した item をコンソールに出力します
  　console.log(currentItem);
});

Velo開発のご依頼はこちら

この記事が気に入ったらサポートをしてみませんか？

Velo 第２７回 非同期処理とasync/await

Velo 第２７回　非同期処理とasync/await