問題タブ [sveltekit]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - SvelteKit - 後続の呼び出しでサーバーがレンダリングしたページに読み込みインジケーターを正しく表示する方法
load 関数で API からデータをフェッチするページ (動的ルート) があります。データがフェッチされるまで読み込みインジケータを表示する正しい方法は何ですか? 私が試したこと:
- 待機ブロックの使用。関数をフェッチする promise を返し、通常のスクリプト タグで promise 変数をエクスポートします。次に、データを操作した後、この約束を手動で解決します。
次に、通常のスクリプトタグで
次にHTMLで
これは、ページがサーバー側でレンダリングされるときに機能すると思いますが、初めてうまく機能します。しかし、その後の呼び出しでは、プロミス解決ロジックが呼び出されず、プロミスを操作するロジックがない await ブロックで直接プロミスを受け取ります。
- ロード関数から最終的に処理されたデータを受け取る変数をエクスポートし、HTML で、{if} ブロックを使用してこの変数が未定義になるまでロード インジケーターを表示しようとします。これは、変数が実際に未定義のときに初めて機能しますが、その後の呼び出しでは、この変数の値のみが変更され、未定義になることはありません。