요청의 로딩·오류·성공 상태와 취소를 관리합니다.
fetch 요청마다 AbortController를 만들고 새 요청이나 언마운트 때 취소합니다. HTTP 상태와 JSON 구조도 확인해야 합니다.
오래된 응답이 최신 검색 결과를 덮지 않도록 요청 순서나 취소를 관리합니다.
서버 캐시가 필요하면 TanStack Query Vue 같은 검증된 도구의 정책을 검토합니다.
catch에서 AbortError까지 사용자 오류로 표시하면 정상 취소가 실패처럼 보입니다.
로컬 프로젝트에서 확인해보세요다시 시도 버튼과 오류 상태를 추가하세요.
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
const course = ref(null),
error = ref("");
const controller = new AbortController();
onMounted(async () => {
try {
const r = await fetch('data:application/json,{"title":"Vue 실무"}', {
signal: controller.signal,
});
if (!r.ok) throw new Error("HTTP " + r.status);
course.value = await r.json();
} catch (e) {
if (e.name !== "AbortError") error.value = e.message;
}
});
onUnmounted(() => controller.abort());
</script>
<template>
<main>
<p v-if="error" role="alert">{{ error }}</p>
<h1 v-else-if="course">{{ course.title }}</h1>
<p v-else>불러오는 중...</p>
</main>
</template>