async関数を呼んだだけでは、保存完了を待ったことにならない

用語

Promise

JavaScriptで、処理の将来の完了または失敗を表すオブジェクト。

await

Promiseなどの値を待ち、その結果で関数の続きを進める式。失敗なら例外として扱える。

非同期

開始した処理の完了を、その場の呼び出しの終了とは別に受け取る実行の形。

図と例

仮定の例：saveが保存完了を表すPromiseを返す画面で、save(); showSuccess();と書くと失敗前に「保存しました」が出ることがある。try { await save(); showSuccess(); } catch (error) { showFailure(); }とし、saveの中でも保存処理のPromiseを返すかawaitする。

実際のサービス・製品では

• JavaScript async function / MDN

  async関数は常にPromiseを返し、awaitはPromiseが完了するまでその関数の実行を中断することを説明している。

  資料を読む

• JavaScript Promises / MDN

  開始したPromiseを返さないfloating promiseでは、後続の処理が完了を追跡できず、早く進んでしまう例を示している。

  資料を読む

解説

保存・アップロード・画面遷移の順序を決めるときに使う。完了の意味を関数とAPIの契約でそろえ、受付・保存完了・後続ジョブ完了を区別する。

save()の次の行にshowSuccess()を書いても、saveが非同期なら保存より先に成功表示が出ることがある。Promiseは非同期処理の完了や失敗を表すもの。awaitはその関数の続きの処理を待たせるが、アプリ全体を止めたり、CPU処理を別スレッドへ移したりはしない。async関数の中でも、必要な非同期処理をawaitせずreturnもしなければ、呼び出し元がawaitしてもその処理を待てない。成功表示は必要な完了を待ったあとに行い、try/catchなどで失敗を表示する。APIがジョブの受付だけを返すなら、その応答を待っても業務の完了にはならない。

さらに学ぶ

• MDN — async function
• MDN — Using promises

チェック

saveは保存完了で成功し、保存失敗で失敗するPromiseを返す。保存できたときだけ成功表示するコードは？

1. try { await save(); showSuccess(); } catch (error) { showFailure(); }
2. save(); showSuccess();
3. try { await save(); } catch (error) {} showSuccess();