Svelte 구성 요소를 사용하여 비동기 함수의 반환 값에 액세스

Question

다음 코드 조각(+layout.svelte)이 있습니다.

"$lib/locale"에서 { getLang } 가져오기;
"$app/environment"에서 { 브라우저 }를 가져옵니다.

const loadLang = 비동기 () =>
    if (브라우저) {
        // return wait getLang(document.documentElement.lang, "home").then( function (data: any) {
        // const nav = JSON.stringify(data.nav);
        // console.log(nav)
        // 탐색을 반환합니다.
        // });
        const initLocale= wait getLang(document.documentElement.lang, "home");
        initLocale.json()을 반환합니다.
    }
};

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

이 코드의 목적은 브라우저 언어와 요청 경로를 감지한 다음 언어와 페이지에 해당하는 올바른 JSON 파일을 검색하는 것입니다. 그러나 여기에 언급된 많은 답변과는 별도로 구성 요소의 HTML 요소에서 사용하기 위해 async loadLang()의 언어 데이터에 액세스할 수 없다는 문제가 있습니다. 내가 찾고 있는 것이 아님), 내가 원하는 것은 위 함수의 반환 값에 액세스하여 HTML 요소에서 사용하는 방법입니까?

Answer 1

마크업에는 Promise를 기다리는 데 사용할 수 있는 기본 구문(다양한 변형 포함) 이 있습니다.

으아악

또 다른 옵션은 최상위 범위에서 변수를 선언하고 데이터가 로드된 후 설정하는 것입니다. 물론 처음에는 정의되지 않거나 초기화하는 다른 값이 됩니다. 그런 다음 일반적으로 {#if}:

와 결합됩니다. 으아악 으아악

---

브라우저에 가드를 두는 것은 좋지 않습니다. 데이터 로딩을 +layout 로딩 기능으로 옮기고 싶을 수도 있습니다 browser上有一个守卫并不好。您可能希望将数据加载移到+layout加载函数中，以便将其作为data data 속성으로 전달되어 SSR 및 CSR 중에 사용할 수 있으며 레이아웃을 사용하는 모든 페이지에서 사용할 수 있습니다.

document.documentElement.lang，而是在服务器上使用请求的Accept-Language 헤더를 사용하지 마세요.

페이지가 제공/렌더링되기 전에 데이터를 로드하면 잠재적인 레이아웃 변경이나 표시기 로드도 방지할 수 있습니다.