[Udemy Vue 완벽가이드 Section12] 161. “데이터 없음" 상태처리하기

지금까지는 모두 오류없이 제대로 작동한다는 가정 하에 작업했다.

하지만 현실에서는 당연히 오류가 발생할 수 있다.

따라서 로딩상태 확인과 더불어 표시할 데이터가 있는지도 확인하고자 한다.

오류로 인식되지는 않지만, 데이터가 없는 경우가 발생할 수 있기 때문.

가령 Firebase에 있는 모든 데이터를 삭제하여 데이터가 없어도 요청은 성공적으로 전송할 수 있다.

하지만 로드할 데이터가 없으므로 아무 데이터가 없는 응답을 얻는다.

 

const results = [ ];

데이터가 없는 경우에 대해 처리하는 방법은 쉽다.

루프를 거칠 데이터가 없기 때문에 results도 빈 배열로 남는다.

.then((data) => {
  this.isLoading = false;
  const results = [];
   for (const id in data) {
     results.push({
       id: id,
       name: data[id].name,
       rating: data[id].rating,
    });
  }
  this.results = results;
});

 

isLoading으로 로딩상태를 확인해야할 뿐만 아니라, v-else-if로 로딩상태가 아니면서 results.length, 즉 데이터 길이가 0보다 큰 데이터를 찾는다.

길이가 0이라면 빈 배열일테고, 데이터가 없다는 것을 의미한다.

추가로 results값이 참인지 확인할 수도 있다. results.length를 알아보기 전에 넣어주면 좋다.

여기서는 results가 항상 존재하지만, 다른 앱에서는 데이터 로드에 실패하면 설정 자체가 불가능할 수 있다. 그래서 results값 역시 확인해주는 것이 좋다.

 

또다른 문단 <p>를 이용해서 "No stored experiences found. Start adding some survey results first."와 같은 문구를 추가해보자.

로딩중도 아니고, 결과값으로 나오는 데이터가 없거나 결과값의 길이가 0인 경우, 이 문구가 표시되도록 설정하자.

<p v-if="isLoading">Loading...</p>
<p v-else-if="!isLoading && (!results || results.length === 0)">
  No stored experiences found. Start adding some survey results first.
</p>
<ul v-else-if="!isLoading && results && results.length > 0">
  <survey-result
    v-for="result in results"
    :key="result.id"
    :name="result.name"
    :rating="result.rating"
  ></survey-result>
</ul>

 

이렇게 저장하고 새로고침해보면 로딩 후, 데이터가 없다는 메시지가 뜬다.

 

이렇게 데이터가 없는 경우를 처리해보았다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.