API 예외 처리

200 처리 완료

<ul>
  <li v-for="item in listData" :key="item.id">
    {{ 내용 }}
  </li>
</ul>

200 처리 완료 : 조회 결과 데이터 없음

v-if, v-else로 노데이터 처리

<ul v-if="listData.length">
  <li v-for="item in listData" :key="item.id">
    {{ 내용 }}
  </li>
</ul>
<no-data v-else />

500 서버 에러

async fetchData() {
  try {
    const { data: response } = await getData({
      code: this.code,
      page: this.page,
      size: this.size,
    });
    this.listData = response;
  } catch (e) {
    console.log(e);
    await this.$router.push('/500');		// 500 페이지로 이동
  }
},

404 프론트 에러

data() {
  return {
    listData [
      {
      	id: '어쩌구',
    	title: '저쩌구', 
    	...
      },
      {
      	id: '어쩌구',
    	title: '저쩌구', 
    	...
      }
      ...
	]  	
  }
}

...

async fetchData() {
  try {
    const { data: response } = await getData({
      code: this.code,
      page: this.page,
      size: this.size,
    });
    this.listData = response;
  } catch (e) {
    console.log(e);
    this.listData = [];						// 데이터 빈 배열로 덮어쓰기
    await this.$router.push('/404');		// 404 페이지로 이동
  }
},