오류 처리와 전역 인터셉터

요청은 실패할 수 있습니다

요청에 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
  }
}

간단히 확인하기

복습