エラーハンドリングとグローバルインターセプター

リクエストは失敗することがある

リクエストをtry/catchで囲む

async fetchPosts() {
  try {
    const res = await api.get("/posts")
    this.posts = res.data
  } catch (err) {
    console.error(err)
  }
}

エラーの確認

catch (err) {
  if (err.response) {
    console.log(err.response.status)
    console.log(err.response.data)
  } else {
    console.log("Network error")
  }
}

エラー状態の追跡

data() {
  return { posts: [], loading: false, error: null }
}

エラーの設定

async fetchPosts() {
  this.loading = true
  this.error = null
  try {
    this.posts = (await api.get("/posts")).data
  } catch (err) {
    this.error = "Could not load posts. Please try again."
  } finally {
    this.loading = false
  }
}

エラーメッセージの表示

<template>
  <p v-if="loading">Loading...</p>
  <p v-else-if="error" class="error">{{ error }}</p>
  <ul v-else>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

インターセプターとは

リクエストインターセプター

api.interceptors.request.use(config => {
  const token = localStorage.getItem("token")
  if (token) {
    config.headers.Authorization = "Bearer " + token
  }
  return config
})

レスポンスインターセプター

api.interceptors.response.use(
  response => response,
  error => {
    if (error.response && error.response.status === 401) {
      // redirect to login
    }
    return Promise.reject(error)
  }
)

グローバルエラー処理

api.interceptors.response.use(
  res => res,
  error => {
    const status = error.response ? error.response.status : null
    if (status === 401) logout()
    if (status >= 500) showToast("Server error, try later")
    return Promise.reject(error)
  }
)

簡単な再試行ロジック

async function getWithRetry(url, retries = 2) {
  try {
    return await api.get(url)
  } catch (err) {
    if (retries > 0) {
      return getWithRetry(url, retries - 1)
    }
    throw err
  }
}

理解度チェック

まとめ