web-dev-qa-db-fra.com

Est-ce que `async/wait` est disponible dans Vue.js` monté`?

J'aimerais faire quelque chose comme ceci dans mounted() {}:

await fetchData1();
await fetchData2UsingData1();
doSomethingUsingData1And2();

Je me demande donc si cela fonctionne:

async mounted() {
    await fetchData1();
    await fetchData2UsingData1();
    doSomethingUsingData1And2();
},

Dans mon environnement, cela ne génère aucune erreur et semble fonctionner correctement . Mais dans ce problème, async/await dans les hooks du cycle de vie n'est pas implémenté.

https://github.com/vuejs/vue/issues/7209

Je n'ai pas pu trouver d'autres informations, mais sont-elles disponibles?

vue.jsvuejs2async-await
1
Taichi

Cela fonctionnera parce que le hook mounted sera appelé après le composant a déjà été monté. En d'autres termes, il n'attendra pas que les promesses soient résolues avant le rendu. La seule chose est que vous aurez un composant "vide" jusqu'à ce que les promesses résolvent.

Si ce dont vous avez besoin est que le composant ne soit pas rendu tant que les données ne sont pas prêtes, vous aurez besoin d'un indicateur associé à un v-if pour rendre le composant lorsque tout est prêt:

// in your template
<div v-if="dataReady">
    // your html code
</div>


// inside your script 
data () {
    return {
        dataReady: false,
        // other data
    }
},

async mounted() {
    await fetchData1();
    await fetchData2UsingData1();
    doSomethingUsingData1And2();
    this.dataReady = true;
},
6
EderChrono