如何在Svelte组件中获取async函数返回值并用于HTML元素？

你当前代码的问题是：直接调用loadLang()得到的是Promise对象，不是实际的语言数据，而且没有利用Svelte的响应式机制，所以没法在HTML元素里正常使用数据。以下是两种可行的解决方法：

方法一：用Svelte原生异步模板块 #

直接在模板中处理异步Promise，是Svelte最简洁的异步数据渲染方式：

<script>
import { getLang } from "$lib/locale";
import { browser } from "$app/environment";

const loadLang = async () => {
    if (browser) {
        const initLocale = await getLang(document.documentElement.lang, "home");
        return initLocale.json();
    }
    return {}; // 非浏览器环境返回空对象兜底
};

const localePromise = loadLang();
</script>

{#await localePromise}
    <p>加载语言数据中...</p>
{:then locale}
    <!-- 这里直接使用locale中的数据渲染 -->
    <nav>
        {#each locale.nav as navItem}
            <a href={navItem.url}>{navItem.label}</a>
        {/each}
    </nav>
{:catch err}
    <p>语言数据加载失败：{err.message}</p>
{/await}

方法二：用onMount结合响应式变量 #

适合需要在脚本中先处理数据再渲染的场景：

<script>
import { getLang } from "$lib/locale";
import { browser } from "$app/environment";
import { onMount } from "svelte";

// 声明响应式变量存储数据、加载状态和错误信息
let locale = {};
let isLoading = true;
let loadError = null;

onMount(async () => {
    try {
        const initLocale = await getLang(document.documentElement.lang, "home");
        locale = await initLocale.json();
    } catch (err) {
        loadError = err;
    } finally {
        isLoading = false;
    }
});
</script>

{#if isLoading}
    <p>加载语言数据中...</p>
{:else if loadError}
    <p>语言数据加载失败：{loadError.message}</p>
{:else}
    <nav>
        {#each locale.nav as navItem}
            <a href={navItem.url}>{navItem.label}</a>
        {/each}
    </nav>
{/if}

关键说明 #

• 两种方案都利用了Svelte的响应式机制，变量更新时自动触发DOM重新渲染
• 增加了加载状态和错误处理，避免页面空白或报错
• 非浏览器环境（如SSR）兜底返回空对象，防止执行报错

内容的提问来源于stack exchange，提问作者user14677188