Vue Academy · 课时

错误处理与全局拦截器

Q: 「错误处理与全局拦截器」这节课中我会学到什么？

处理请求错误并配置 Axios 拦截器 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

处理请求错误并配置 Axios 拦截器

第 3 / 3 课13 个步骤

错误处理与全局拦截器 是 CoddyKit 上的免费 Vue Academy 课时。这是第 3 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。

请求可能失败

网络可能中断，服务器可能返回错误，令牌也可能过期。健壮的应用会预料到失败并优雅地响应，而不是崩溃或让用户永远盯着加载指示器。

在请求周围使用 try/catch

将等待中的请求包裹在 try/catch 中，以捕获错误。当服务器返回 4xx 或 5xx 状态码时，Axios 会抛出错误。

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

检查错误

Axios 错误包含有用的详细信息。当服务器已响应时，error.response 会存在；如果它不存在，通常意味着发生了网络错误或超时。

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 }
}

设置错误

在每次请求前重置错误，然后在 catch 代码块中为其赋值。

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>

什么是拦截器？

Axios 拦截器允许您在每个请求或响应上自动运行代码。它们非常适合处理附加令牌或集中处理错误等横切关注点。

请求拦截器

请求拦截器会在每个请求发出前运行。您可以用它在全局范围内附加身份验证请求头。

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)
  }
)

全局错误处理

将错误逻辑集中在响应拦截器中，可以让各个组件保持简洁。401（退出登录）或 500（显示提示）等常见情况都可以集中处理。

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
  }
}

快速检查

测试您对错误处理和拦截器的理解。

在交互式课程中回答

回顾

使用 try/catch 包裹请求，在界面中显示友好的 error 消息，并检查 error.response 以区分服务器错误和网络失败。拦截器可以集中处理相关关注点：请求拦截器附加令牌，响应拦截器处理全局错误，而小型重试辅助函数则增强应用的容错能力。接下来，您将优化应用性能。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「错误处理与全局拦截器」课时是免费的吗？

是的 — 「错误处理与全局拦截器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。

「错误处理与全局拦截器」这节课中我会学到什么？

处理请求错误并配置 Axios 拦截器你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 3 节。

「错误处理与全局拦截器」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy