Akses nilai pulangan fungsi tak segerak menggunakan komponen Svelte

Question

Saya mempunyai coretan kod berikut (+layout.svelte):

import { getLang } daripada "$lib/locale";
import { penyemak imbas } daripada "$app/environment";

const loadLang = tak segerak () =>
    jika (pelayar) {
        // return tunggu getLang(document.documentElement.lang, "home").then( function (data: any) {
        // const nav = JSON.stringify(data.nav);
        // console.log(nav)
        // kembali nav;
        // });
        const initLocale= tunggu getLang(document.documentElement.lang, "home");
        kembalikan initLocale.json();
    }
};

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

Tujuan kod ini adalah untuk mengesan bahasa penyemak imbas dan laluan permintaan, dan kemudian mencari fail JSON yang betul sepadan dengan bahasa dan halaman. Tetapi terdapat masalah, saya tidak boleh mengakses data bahasa async loadLang() untuk menggunakannya dalam elemen HTML komponen, selain daripada banyak jawapan yang disebut di sini (iaitu bukan apa yang saya cari), apa yang saya mahu ialah cara untuk mengakses nilai pulangan fungsi di atas dan menggunakannya dalam elemen HTML? 
            

Answer 1

Dalam markup, terdapat sintaks asli (dengan banyak variasi) yang boleh digunakan untuk menunggu janji:

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

Pilihan lain ialah mengisytiharkan pembolehubah dalam skop teratas dan menetapkannya selepas data dimuatkan. Sudah tentu ia tidak akan ditentukan pada mulanya, atau apa sahaja nilai lain yang anda mulakan. Ini kemudian biasanya digabungkan dengan {#if}:

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

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

---

Mempunyai pengawal pada browser adalah tidak baik. Anda mungkin mahu mengalihkan pemuatan data ke fungsi pemuatan +layout browser上有一个守卫并不好。您可能希望将数据加载移到+layout加载函数中，以便将其作为data dalam supaya ia dihantar sebagai atribut data dan boleh digunakan semasa SSR dan CSR, dan tersedia untuk setiap halaman yang menggunakan reka letak.

Jangan gunakan document.documentElement.lang，而是在服务器上使用请求的Accept-Language pengepala.

Memuatkan data sebelum halaman disiarkan/diberikan juga menghalang kemungkinan perubahan susun atur atau penunjuk pemuatan.