데이터 요청의 모든 사용자 상태와 복구 행동을 구현합니다.
pending, error, 빈 배열, 성공을 분리하면 사용자가 기다릴지, 다시 시도할지, 데이터를 추가할지 판단할 수 있습니다.
오류 메시지는 내부 스택이 아니라 사용자가 할 수 있는 행동을 안내합니다.
기존 데이터 재검증 중에는 화면을 지울지 유지할지 제품 요구에 맞게 결정합니다.
데이터가 undefined일 때 빈 목록으로만 보여주면 요청 실패가 숨겨집니다.
로컬 프로젝트에서 확인해보세요빈 결과 상태와 강좌 추가 링크를 구현하세요.
<script setup>
const fail = ref(true);
const { data, error, status, refresh } = await useAsyncData("retry-demo", async () => {
await new Promise((r) => setTimeout(r, 250));
if (fail.value) {
fail.value = false;
throw new Error("일시적인 실패");
}
return [{ id: 1, title: "Nuxt" }];
});
</script>
<template>
<main>
<p v-if="status === 'pending'">불러오는 중...</p>
<section v-else-if="error">
<p role="alert">불러오지 못했습니다.</p>
<button @click="refresh">다시 시도</button>
</section>
<ul v-else>
<li v-for="item in data" :key="item.id">{{ item.title }}</li>
</ul>
</main>
</template>