【kintone】async/await で順番通りにデータを取得する

前回は kintone.Promise.all で複数の非同期処理を同時並行で実行しつつ、全部終わったら次の処理を行う・・・というプログラムについて書きました。
今回は、 async/await で他のアプリからレコードのデータを取ってくるという処理（非同期処理）を順番に実行することについて考えてみたいと思います。

アプリの準備

順番に意味があるもの・・・といえば、わらしべ長者ぐらいしか思い浮かばす。
というわけで、わらしべ長者アプリを作ります。
async/await を複数回使いたいので、
2回交換した後のアイテムを取得するようなアプリを作りたいと思います。

わらしべマスターアプリ

わら → みかん → 反物 → 馬 → 家
という交換を行うので下記のようなアプリにします。
「交換前」は重複禁止にしておきましょう。

フィールド種類	フィールドコード	備考
文字列(1行)	交換前	重複禁止
文字列(1行)	交換前

わらしべ2回交換アプリ

2回交換後のモノを表示するアプリを作ります。
ルックアップで先程のわらしべマスターの「交換前」を取得します。
保存ボタンクリック後に2回交換後のアイテムが保存されるようにしたいと思います。

フィールド種類	フィールドコード	備考
ルックアップ	交換前	わらしべアプリの「交換前」を取得
文字列(1行)	交換2回

JavaScript を書く

わら → みかん → 反物 → 馬 → 家

2回交換後のアイテムを取得するには

1. ルックアップでアイテム取得（例：みかん）
2. 1. で取得したアイテムで検索（例：みかん→反物）
3. 1. で取得したアイテムで検索（例：反物→馬）
4. 1. で取得したアイテムを表示

の順にプログラムを実行すると良さそうです。

というわけでプログラムは下記のようになります。
※わらしべ2回交換アプリの方にJavaScriptをアップします。

kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], async event => {
    //1回目の交換：ルックアップで取得したアイテムで検索（みかん → 反物）
    const resp1 = await kintone.api('/k/v1/records', 'GET', {'app': わらしべマスターアプリID,'query':'交換前="'+event.record.交換前.value+'"'});
    //2回目の交換：1回目の交換後アイテムで検索（反物 → 馬）
    const resp2 = await kintone.api('/k/v1/records', 'GET', {'app': わらしべマスターアプリID,'query':'交換前="'+resp1.records[0].交換後.value+'"'});
    //2回目の交換後のアイテムを表示（馬 を表示）
    event.record.交換2回.value =resp2.records[0].交換後.value;
    return event;                         
});   

できあがり

みかんを選ぶと、馬が表示されます。
参考：わら → みかん → 反物 → 馬 → 家

もし kintone.Promise.all だったら・・・

kintone.Promise.all を使って書き換えるとこんな感じなると思います。

kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], event => {
    //1回目の交換：ルックアップで取得したアイテムで検索（みかん → 反物）
    const resp1 = kintone.api('/k/v1/records', 'GET', {'app': わらしべマスターアプリID,'query':'交換前="'+event.record.交換前.value+'"'});
    //2回目の交換：1回目の交換後アイテムで検索（反物 → 馬）
    const resp2 = kintone.api('/k/v1/records', 'GET', {'app': わらしべマスターアプリID,'query':'交換前="'+resp1.records[0].交換後.value+'"'});
    return kintone.Promise.all([resp1, resp2]).then(resps => { 
        console.log(resps);
        //2回目の交換後のアイテムを表示（馬 を表示）
        event.record.交換2回.value =resps[1].records[0].交換後.value;
        return event;                         
    });       
});  

kintone.Promise.all は、複数の非同期処理を同時並行に実行させて、全部処理が終わったら次に進むという動きをしました。今回の例で kintone.Promise.all を使うとconst resp2 = ～～ resp1.records[0].交換後.value ～～～のところで下記のようなエラーが発生します。
resp1にレコードのデータ取得する前にresp1.records[0]の中身にアクセスしようとしてエラーが起きるのです。resp1を取得したあとでresp2を取得するという順番を守る必要があります。こういった、順番が大切な場合は kintone.Promise.all ではなく、async/await を使いましょう。

まとめ

async/await を使って、順番通りにデータを取得するというプログラムを紹介しました。
順番関係なく同時並行に実行して良いときは kintone.Promise.all を使いましょう。
※Promise.all と async/await の使い分けポイントは前回の↓こちらをごらんください＾０＾
【kintone】kintone.Promise.all で他アプリからデータを取得して計算しよう

ちょっとした「動いた！」からカスタマイズの楽しさを感じてもらえたら嬉しいです。