사용자 사건에서 서버 요청을 한 번 실행합니다.
$fetch는 ofetch 기반 요청 함수이며 버튼 제출처럼 이벤트 시점 요청에 적합합니다. 자동 SSR payload 중복 방지가 필요한 초기 데이터에는 useFetch를 우선합니다.
pending 상태로 중복 제출을 막고 HTTP 실패를 사용자 메시지와 운영 로그로 분리합니다.
AbortSignal과 timeout, idempotency 요구를 실제 변경 API에 적용합니다.
setup 최상위에서 $fetch만 호출하면 hydration 중 같은 요청이 다시 발생할 수 있습니다.
로컬 프로젝트에서 확인해보세요실패 후 다시 시도 버튼을 추가하세요.
<script setup>
const result = ref(null),
pending = ref(false),
error = ref("");
async function load() {
pending.value = true;
error.value = "";
try {
result.value = await $fetch('data:application/json,{"saved":true}');
} catch (e) {
error.value = e.message;
} finally {
pending.value = false;
}
}
</script>
<template>
<main>
<button :disabled="pending" @click="load">
{{ pending ? "처리 중..." : "요청 실행" }}
</button>
<p v-if="error" role="alert">{{ error }}</p>
<pre v-if="result">{{ result }}</pre>
</main>
</template>