Greifen Sie mithilfe von Svelte-Komponenten auf den Rückgabewert einer asynchronen Funktion zu

Question

Ich habe das folgende Code-Snippet (+layout.svelte):

import { getLang } from "$lib/locale";
{Browser} aus „$app/environment“ importieren;

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

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

Der Zweck dieses Codes besteht darin, die Browsersprache und die Route der Anfrage zu erkennen und dann nach der richtigen JSON-Datei entsprechend der Sprache und Seite zu suchen. Aber es gibt ein Problem: Ich kann nicht auf die Sprachdaten des asynchronen loadLang() zugreifen, um sie im HTML-Element der Komponente zu verwenden, abgesehen von den vielen hier genannten Antworten (die sind nicht das, wonach ich suche), was ich möchte, ist eine Möglichkeit, auf den Rückgabewert der obigen Funktion zuzugreifen und ihn in einem HTML-Element zu verwenden?

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头。

在页面提供/渲染之前加载数据还可以防止潜在的布局变化或加载指示器。