web-dev-qa-db-ja.com

「async / await」はVue.jsで「マウント」されていますか？

mounted() {}でこのようなことをしたいのですが：

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

だから私はこれがうまくいくのだろうか：

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

私の環境ではエラーは発生せず、問題なく動作しているようです。しかし、この問題では、async/await in lifecycleフックは実装されていません。

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

詳細情報は見つかりませんでしたが、実際に入手できますか？

vue.jsvuejs2async-await
22
Taichi

mountedフックが呼び出されるため、これは機能しますafterコンポーネントはすでにマウントされています。つまり、レンダリングする前に、promiseが解決するのを待ちません。唯一のことは、約束が解決するまで、「空の」コンポーネントを持つことです。

データの準備ができるまでコンポーネントをレンダリングしないことが必要な場合は、v-ifとともに機能するすべての準備ができたときにコンポーネントをレンダリングするフラグをデータに含める必要があります。

// 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;
},
44
EderChrono