Svelte コンポーネントを使用して非同期関数の戻り値にアクセスする

Question

次のコード スニペット (layout.svelte) があります。

import { getLang } from "$lib/locale";
"$app/environment" から { ブラウザ } をインポートします。

const loadLang = async () => {
    if (ブラウザ) {
        // return await getLang(document.documentElement.lang, "home").then( function (data: any) {
        // const nav = JSON.stringify(data.nav);
        // console.log(nav)
        // ナビゲーションを返します;
        // });
        const initLocale= await getLang(document.documentElement.lang, "home");
        initLocale.json() を返します。
    }
};

const a =loadLang();
コンソール.ログ(a);

このコードの目的は、ブラウザの言語とリクエストのルートを検出し、言語とページに対応する正しい JSON ファイルを検索することです。しかし、問題があります。ここで説明されている多くの回答を除き、コンポーネントの HTML 要素で使用するために非同期 loadLang() の言語データにアクセスできません。私が探しているもの）、私が欲しいのは、上記の関数の戻り値にアクセスし、それをHTML要素で使用する方法です。

Answer 1

マークアップには、Promise を待つために使用できる ネイティブ構文 (多くのバリエーションがあります) があります。 リーリー

別のオプションは、最上位スコープで変数を宣言し、データがロードされた後にそれを設定することです。もちろん、最初は未定義、または初期化した他の値になります。通常は

{#if} と組み合わせます: リーリー リーリー

---

ブラウザ

を警戒するのは良くありません。データのロードを layoutloading 関数 に移動して、data 属性として渡し、SSR および CSR 中に使用できるようにすることもできます。およびレイアウトを使用してすべてのページで利用可能です。

document.documentElement.lang

を使用せず、代わりにサーバー上のリクエストの Accept-Language ヘッダーを使用します。 ページが提供/レンダリングされる前にデータを読み込むと、潜在的なレイアウト変更やインジケーターの読み込みも防止されます。