Vue.js - 데이터 요청이 완료될 때까지 페이지 렌더링을 연기합니다.

Vue.js - 데이터 요청이 완료될 때까지 페이지 렌더링을 연기합니다.

서버에서 가져온 데이터를 엑시스로 표시하는 페이지가 있습니다.

Axios 요청이 완료될 때까지 페이지 렌더링을 연기하고 싶습니다.

그 이유는 페이지의 렌털 버전이 있기 때문입니다.따라서 Axios 요청이 실행 중일 때 (CLS 문제를 방지하기 위해) 빈 화면이 아닌 사전 렌더링된 데이터를 표시하고 싶습니다.

현재 가지고 있는 것은 다음과 같습니다.

export default {

  ....

  created() {
    this.fetchData().then((returnedData) => this.personData = returnedData);
  },

  data() {
    return {
      personData: {
        name: "",
      },
    };
  },

  methods: {
    async fetchData() {
      const response = await axios.get("api/persondata/");
      return await response.data;
    },
  },

  ...

}

그래서 기본적으로 내가 하고 싶은 것은 공리들이 "동기화"를 요구하도록 하는 것이다, 아니면 어떻게든 공리들이create()함수는 요청이 완료될 때까지 기다립니다.

이상적인 시나리오는 Axios 요청이 실패했을 경우에 대비하여 렌더링 전체를 방지하고 렌더링된 페이지를 표시하는 것입니다.

어떻게 하는지 생각나는 거 없어?

이 로드될 때까지 대기하는 v-if로 랩할 수 있습니다.v-show 대신 v-if를 사용하면 오류가 응답 개체에 아직 존재하지 않는 값을 읽을 수 없습니다.

<template>
  <div v-if="!isLoading">
    Show your updated data here
  </div>
  <div v-else>
    Show your prendered data here
  </div>
</template>

export default {

  data() {
    return {
      personData: {
        name: "",
      },
      isLoading: true
    };
  },

  methods: {
    async fetchData() {
      const response = await axios.get("api/persondata/");
      return await response.data;
    },
  },
  async mounted(){
     this.personData = await this.fetchData()
     this.isLoading = false
  }
}

오류 처리를 위해 try/catch로 랩합니다.

대규모 Vue 프로젝트를 구축한 결과, 이 방법을 사용하여 데이터를 렌더링 및 포맷하는 컴포넌트와 조합하면 라우터를 사용하는 것보다 더 효과적이라는 것을 알게 되었습니다.라우터 후크를 사용하는 것은 소규모 어플리케이션에서는 편리하지만 페이지액세스 툴이나 기타 글로벌라우팅 기능을 추가할 필요가 있는 경우에는 즉시 중단됩니다.

일반적인 패턴은 View -> read ID parameter -> pass to components that darling data -> components do acios to details 입니다.루트 파라미터가 변경되어도(루트는 변경되지 않음) 파라미터가 변경되어도 컴포넌트는 갱신됩니다.

언급URL : https://stackoverflow.com/questions/66530547/vue-js-defer-page-rendering-until-data-request-finishes