Accédez à la valeur de retour d'une fonction asynchrone à l'aide des composants Svelte

Question

J'ai l'extrait de code suivant (+layout.svelte) :

import { getLang } depuis "$lib/locale" ;
importer {navigateur} depuis "$app/environment" ;

const loadLang = async () =>
    si (navigateur) {
        // retour wait getLang(document.documentElement.lang, "home").then( function (data: any) {
        // const nav = JSON.stringify(data.nav);
        // console.log(nav)
        // renvoie la navigation ;
        // });
        const initLocale= wait getLang(document.documentElement.lang, "home");
        return initLocale.json();
    }
} ;

const a = loadLang();
console.log(a);
≪/pré>
Le but de ce code est de détecter la langue du navigateur et le parcours de la requête, puis de rechercher le bon fichier JSON correspondant à la langue et à la page. Mais il y a un problème, je n'arrive pas à accéder aux données de langage de l'async loadLang() afin de l'utiliser dans l'élément HTML du composant, en dehors des nombreuses réponses mentionnées ici (qui sont pas ce que je recherche), ce que je veux, c'est un moyen d'accéder à la valeur de retour de la fonction ci-dessus et de l'utiliser dans un élément HTML ? 

Answer 1

Dans le balisage, il existe une syntaxe native (avec de nombreuses variantes) qui peut être utilisée pour attendre des promesses :

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

Une autre option consiste à déclarer une variable dans la portée supérieure et à la définir une fois les données chargées. Bien sûr, il ne sera pas défini au début, ou quelle que soit la valeur à laquelle vous l'initialisez. Ceci est alors généralement combiné avec {#if} : 

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

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

---

Avoir une garde sur le navigateur n'est pas une bonne chose. Vous souhaiterez peut-être déplacer le chargement des données vers la fonction de chargement +layout browser上有一个守卫并不好。您可能希望将数据加载移到+layout加载函数中，以便将其作为data afin qu'il soit transmis en tant qu'attribut data et puisse être utilisé pendant SSR et CSR, et soit disponible pour chaque page qui utilise la mise en page.

N’utilisez pas d’en-têtes document.documentElement.lang，而是在服务器上使用请求的Accept-Language.

Le chargement des données avant que la page ne soit servie/rendue empêche également d'éventuelles modifications de mise en page ou des indicateurs de chargement.