【Vue.js】非同期APIの状態管理パターン｜loading・error・successの統一的な扱い方

import { ref } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)      // ← 初期値が false だと、取得前に「空のリスト」が一瞬出る

  const fetchData = async () => {
    loading.value = true
    error.value = null
    try {
      const res = await fetch(url)   // ← url は固定の文字列。変わっても追従しない
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      data.value = await res.json()
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
  }

  return { data, error, loading, fetchData }
}

// composables/useApi.js
import { ref, shallowRef, watchEffect, toValue } from 'vue'

export function useApi(url) {
  const data = shallowRef(null)
  const error = ref(null)
  // 状態は1つの値で表す：'idle' | 'loading' | 'success' | 'error'
  const status = ref('idle')
  const trigger = ref(0)           // 手動の再取得に使う

  watchEffect((onCleanup) => {
    trigger.value                  // 読むことで、refetch() でも再実行される
    const target = toValue(url)    // ref / computed / getter / 文字列のどれでも受け取れる

    if (!target) {                 // URL がまだ決まっていなければ、何もしない
      status.value = 'idle'
      return
    }

    // 次の実行の前（URL が変わったとき）や、破棄されるときに、前の通信を中止する
    const controller = new AbortController()
    onCleanup(() => controller.abort())

    status.value = 'loading'
    error.value = null

    fetch(target, { signal: controller.signal })
      .then((res) => {
        if (!res.ok) {
          const err = new Error(`HTTP ${res.status}`)
          err.status = res.status   // 種類を区別できるよう、ステータスを残す
          throw err
        }
        return res.json()
      })
      .then((json) => {
        data.value = json
        status.value = 'success'
      })
      .catch((err) => {
        if (err.name === 'AbortError') return   // 自分で中止したものは、エラーにしない
        error.value = err
        status.value = 'error'
      })
  })

  function refetch() {
    trigger.value++
  }

  return { data, error, status, refetch }
}

<script setup>
import { ref, computed } from 'vue'
import { useApi } from './composables/useApi'

const userId = ref(1)

// userId が変わると、URL も変わり、自動で再取得される
const url = computed(() => `https://jsonplaceholder.typicode.com/posts?userId=${userId.value}`)

const { data, error, status, refetch } = useApi(url)
</script>

<template>
  <button @click="userId++">次のユーザー</button>

  <p v-if="status === 'loading'">読み込み中…</p>

  <div v-else-if="status === 'error'">
    <p>エラー：{{ error.message }}</p>
    <button @click="refetch">再試行</button>
  </div>

  <p v-else-if="status === 'success' && data.length === 0">データがありません</p>

  <ul v-else-if="status === 'success'">
    <li v-for="post in data" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

// 再試行してよいのは、「やり直せば成功するかもしれない」エラーだけ
function isRetryable(err) {
  if (err.name === 'AbortError') return false     // 自分で中止した
  if (err.status === undefined) return true       // ネットワークエラーなど
  return err.status >= 500                        // サーバー側の一時的な障害
  // 4xx（URL違い・認証切れ・入力ミスなど）は、やり直しても同じ結果になる
}