Vue.js에서 "async/ait"을 사용할 수 있습니까?

Vue.js에서 "async/ait"을 사용할 수 있습니까?

저는 이런 걸 하고 싶어요mounted() {}:

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

그래서 이게 효과가 있을까?

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

내 환경에서는 오류가 발생하지 않고 잘 작동하는 것 같습니다.하지만 이번 호에서는async/await라이프 사이클의 훅은 실장되어 있지 않습니다.

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

더 자세한 정보는 찾을 수 없었습니다만, 실제로 입수할 수 있습니까?

동작합니다.mounted훅은 컴포넌트가 이미 마운트된 후에 호출됩니다.즉, 렌더링 전에 약속이 해결될 때까지 기다리지 않습니다.유일한 것은 약속이 해결될 때까지 '빈' 컴포넌트를 갖게 된다는 것입니다.

데이터가 준비될 때까지 렌더링되지 않는 컴포넌트가 필요한 경우 데이터 내에 플래그가 있어야 합니다.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;
},

편집: 매뉴얼에 기재되어 있는 바와 같이, 이것은 시험적인 기능이기 때문에, 현시점에서는 실가동 애플리케이션에서는 사용하지 말아 주세요.

vue3에서는 setup() 함수를 다음과 같이 비동기화하는 것이 올바른 방법입니다.

<script>
// MyComponent.vue
export default defineComponent({
/* ... */
    async setup() {
        await fetchData1();
        await fetchData2UsingData1();
        doSomethingUsingData1And2();
        this.dataReady = true;
    }
}
</script>

그런 다음 부모에서 서스펜스 구성 요소를 사용하여 다음과 같은 폴백을 추가합니다.

<template>
    <Suspense>
        <template #default>
            <MyComponent />
        </template>
        <template #fallback>
            Loading...
        </template>
    </Suspense>
</template>

컴포넌트 로드 중에 #폴백템플릿이 표시되고 컴포넌트가 준비되면 컴포넌트 자체가 표시됩니다.

$nextTick을 사용하여 비동기 함수를 호출합니다.

언급URL : https://stackoverflow.com/questions/53513538/is-async-await-available-in-vue-js-mounted