使用Svelte組件存取非同步函數的回傳值

Question

我有以下的程式碼片段（ layout.svelte）：

import { getLang } 從 "$lib/locale";
import { browser } from "$app/environment";

const loadLang = async () => {
    if (browser) {
        // return await getLang(document.documentElement.lang, "home").then( function (data: any) {
        // const nav = JSON.stringify(data.nav);
        // console.log(nav)
        // return nav;
        // });
        const initLocale= await getLang(document.documentElement.lang, "home");
        return initLocale.json();
    }
};

const a = loadLang();
console.log(a);

這段程式碼的功能是偵測瀏覽器語言和請求的路由，然後搜尋與語言和頁面對應的正確的JSON檔案。但是有一個問題，我無法訪問異步loadLang()的語言數據，以便在組件的HTML元素中使用它，除了這裡提到的許多答案（這不是我要找的） ，我想要的是一種存取上述函數的返回值並在HTML元素中使用它的方法？

Answer 1

在標記中，有原生語法（有很多變體）可以用來等待承諾：

{#await loadLang() then lang}
  <span>{lang.someValue}</span>
{/await}

另一種選擇是在頂層範圍聲明一個變量，並在資料載入後設定它。當然，它首先會是未定義的，或者是您初始化的其他任何值。然後通常會與{#if}結合使用：

let lang;
loadLang().then(l => lang = l);

{#if lang}
  <span>{lang.someValue}</span>
{/if}

---

在browser上有一個守衛並不好。您可能希望將資料載入移到 layout載入函數中，以便將其作為data屬性傳遞，並且可以在SSR和CSR期間使用，並且對使用佈局的每個頁面都可使用。

不要使用document.documentElement.lang，而是在伺服器上使用請求的Accept-Language頭。

在頁面提供/渲染之前載入資料還可以防止潛在的佈局變化或載入指示器。