HTMLフォームからAPIコールするイディオム

HTMLフォームには主にPOSTのリクエストを投稿する機能があります。
onSubmitイベントにハンドラを設定すると、Javascriptから任意のAPIコールなどを実行できます。

このハンドラの書き方は似たようなパターンをとることが多く、以下のようなイディオムになります。

 // イベントハンドラにはasyncを指定できる
 document.querySelector('form').addEventListener('submit', async (e) =>{
     document.querySelector('#submit').disabled = true;  // 二重クリックの防止
     e.preventDefault(); // フォームの投稿処理を実行しない
     await some_api_call(e.target.item.value); // フォーム要素の値を用いてAPIコール
     window.location = 'http://example.com/redirected'; // リダイレクトなど任意の処理を実行
     return false;
 });

ハンドラを非同期関数とすることで、APIコールの前後処理も適切な順序で実行できます。

また、onSubmitはHTMLバリデーション通過後に実行されるため、フォームに設定したrequired属性のチェックがAPIコール前に機能します。

⁋ 2022/03/02↻ 2024/11/07