使用Svelte组件访问异步函数的返回值

Question

我有以下的代码片段（+layout.svelte）：

import { getLang } from "$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头。

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