Top-level await
トップレベル await は ES Modules のトップレベルで await を直接使用できるようにします。async 関数でラップする必要がなくなり、モジュールの初期化が簡潔になります。
概要
トップレベル await は ES Modules のトップレベルで await を直接使用できるようにします。async 関数でラップする必要がなくなり、モジュールの初期化が簡潔になります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 89 | 89 | 89 | 15 | 89 | 15 | |
注釈 2件
制限事項
- このブラウザでは部分的にしか実装されていません
実装メモ
- トップレベル待ちを含むモジュールを同時にインポートする複数のモジュールをサポートしない(バグ242740参照)。
注釈 2件
制限事項
- このブラウザでは部分的にしか実装されていません
実装メモ
- トップレベル待ちを含むモジュールを同時にインポートする複数のモジュールをサポートしない(バグ242740参照)。
基本構文
JAVASCRIPT
// module.js
const response = await fetch('/api/config');
export const config = await response.json();
// Client-side
import { config } from './module.js';
console.log(config); // Executed after loading is complete実務での使いどころ
-
Top-level await の活用
モジュールのトップレベルで await を使用可能にする構文。初期化処理の非同期化に便利。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。
参考リンク
Powered by web-features