访问异步函数的返回值以在 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

标头。

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

Answer 2

你的异步函数将返回一个 Promise。您应该使用回调来处理其结果。

像这样：

loadLang().then(result => {
  // and here do whatever you want with the result, log it for example
  console.log(result);
})