데이터가 Vue.js에 로드될 때까지 '찾을 수 없음' 오류를 지연시키는 방법

데이터가 Vue.js에 로드될 때까지 '찾을 수 없음' 오류를 지연시키는 방법

이 루트를 : ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」http://site.dev/person/1

제 컴포넌트는 다음과 같습니다.

// PeopleComponent.vue

<template>

<div>
   <template v-if="person == null">
       <b>Error, person does not exist.</b>
   </template>

   <template v-else>
       <pre> {{ person }} </pre>
   </template>
</div>

</template>

<script>
export default {


    mounted() {
      this.$store.dispatch('getPeople');
    }

    computed: {

      // represents the person whose id potentially matches the value of `/:id` in route.
      person(){ 
          let id = parseInt(this.$route.params.id)
          let person = null

          if(id > 0)
              person = this.$store.state.people.find(p => p.id == id)

          return person;
      }

    }



}
</script>

// [styles]

이 컴포넌트에서 수행하는 작업:

.ID는 이 페이지에 표시되는 특정 리소스를 나타냅니다.는 나나 a a a가 있다person()vuex 스토어에서 URL의 매개 변수와 일치하는 ID를 가진 개체를 검색하는 계산된 속성입니다.

바람직한 결과:

페이지 상단에 오브젝트를 찾을 수 없는 경우(예를 들어 스토어의 오브젝트 배열에 존재하지 않는 ID를 입력하는 경우) 에러 메시지를 표시하고 싶습니다.아이템이 발견되면 오브젝트의 단순한 덤프만으로 충분합니다.현재 이 방법은 작동하지만 API에서 데이터를 가져오고 스토어에서 적절한 개체를 찾을 때까지의 지연은 페이지가 처음 로드되었을 때 개체를 찾을 수 없었던 것처럼 잠깐 오류 메시지를 표시하기에 충분합니다. 네트워크 속도가 느린 상태에서 테스트하면 이 오류 메시지가 몇 초간 표시됩니다. 오브젝트가 존재해도 전혀 나타나지 않도록 삭제하고 싶다.

내가 시도한 것:

• v-cloak- div, - "div"에도 div#app을 사용하다★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
• v-if- - '예'로 지정됩니다

조언해주시면 감사하겠습니다!

---

업데이트: 2020년 3월 31일

필의 제안대로, 나는 페이지가 언제 준비되었는지 나타내는 플래그를 삽입하려고 했다.나는 두 가지 다른 방법으로 그것을 했다.

방법 #1 작성 방법mounted()와 'c'를 했습니다.people해 보겠습니다.합니다.

async mounted() { 

  await this.$store.dispatch('getPeople');
  this.loaded = true;

}

하지만 에러 메세지가 잠깐 표시됩니다.

방법 #2

사용하다then를 「콜백」으로 합니다.true 내부

mounted() {

  let vm = this

  vm.$store.dispatch('getPeople').then(() => {

      vm.loaded = true;

  })

}

두 방법 모두 메시지 표시를 중지하지 않습니다.

이런 일이 일어나고 있는 것 같습니다.

핵심 규칙

는 에러, 에러일 에만 표시되어야 합니다.loaded=true ★★★★★★★★★★★★★★★★★」person=null

1. 로드, 「」, 「」,loadedfalse ★★★★★★★★★★★★★★★★★」personnull에러는 표시되지 않습니다.
2. 페이지는 API에서 사람들을 불러오기 위해 호출을 합니다.에러는 아직 표시되지 않는다.
3. 이 끝나면, 「 。loaded 설정되었습니다.true에서]loadedtrue ★★★★★★★★★★★★★★★★★」person아직 계산 속성에 의해 해결되지 않았습니다.여기서 에러가 발생하고 있다고 생각합니다.]
4. 계산된 속성은 다음 눈금에 저장소에서 관련 레코드를 찾습니다.
5. Person더 이상 아니다null에러가 사라집니다.

2020년 01월 04일 편집

필의 질문에 대답:What does your getPeople() action look like?

getPeople({ commit })  {   
        axios.get('/get/people')
        .then(response => {
            commit("getPeople", response.data);
        })
        .catch(error => {
            console.log(error);
        })
},

상태 조각이 하나 더 필요한 것 같습니다. 예를 들어 로딩이 필요합니다.

변경하다getPeople구성 가능한 동작(Axios 반환)Promise비동기 태스크가 완료될 때까지 기다립니다.

getPeople ({ commit })  {
  // make sure you return the promise
  return axios.get('/get/people').then(response => {
    commit("getPeople", response.data)
  }).catch(error => {
    console.error(error)
    // also make sure you don't accidentally convert this to a successful response
    return Promise.reject(error)
  })
},

그럼 이런 거 해 봐

export default {
  data: () => ({ loading: true }),
  async created () {
    // "created" fires earlier than "mounted"
    await this.$store.dispatch('getPeople')
    this.loading = false
  },
  computed: {
    // etc
  }
}

이제 사용할 수 있습니다.loading템플릿 내

<div v-if="loading">Loading...</div>
<div v-else>
  <!-- your "person" template stuff goes here -->
</div>

메모

비록 이것이 저의 초기 해결책이었지만, 필의 답변이 문제를 가장 잘 설명하고 더 적절한 해결책을 제시해 주는 것 같습니다.따라서 로더를 계속 사용하고 있지만 타이머를 설정하는 대신 Promise를 기다립니다.

결국 나는 그 사이트에 정보가 검색될 때까지 무기한의 시간을 기다려 달라고 요청하고 있다는 것을 깨달았다.그때 무슨 일이 일어나야 해요.이 작업은 즉시 수행될 수 없기 때문에 "자원이 검색되기 전에 무엇을 표시해야 합니까?"라고 자문해야 했습니다.스피너를 넣었어요.

하지만 문제는 "불확실한" 부분입니다.스피너를 얼마나 오래 표시해야 할지 몰라서 글로벌하게 설정했습니다.timeout변수.

그렇게

1) 타임아웃에 도달하지 않고 리소스가 비어 있는 경우 디스플레이 로더

2) 리소스가 로드된 경우 리소스를 표시합니다.

3) 리소스가 비어 있고 타임아웃에 도달한 경우 오류 메시지를 표시합니다.

저는 이것이 해결책으로 만족합니다.

Vue-progressbar를 사용했을 때와 같은 문제가 있었습니다.여기는 링크입니다.

http://hilongjw.github.io/vue-progressbar/index.html

도움이 필요하시면 말씀해주세요.

언급URL : https://stackoverflow.com/questions/60923431/how-to-delay-not-found-error-until-data-has-loaded-in-vue-js