Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
63
18
58
11.1
63
11.3
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT
showLoading();

fetch('/api/data')
  .then(response => response.json())
  .then(data => displayData(data))
  .catch(error => showError(error))
  .finally(() => hideLoading());

ライブデモ

ローディング表示の制御

成功・失敗に関わらず、最後に必ずローディングを非表示にします。

プレビュー全画面表示

ボタンの二重送信防止

処理開始時にボタンを無効化し、終了時に finally で再度有効化します。

プレビュー全画面表示

ログ出力の共通化

処理が終わったことを示すログを、成否に関わらず出力します。

プレビュー全画面表示

実務での使いどころ

  • Promise finally() の活用

    finally() は Promise インスタンスのメソッドで、プロミスが決定したとき(履行されたか拒否されたかのどちらか)に呼び出される関数を準備します。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。