Vue_axios请求&响应拦截

最新推荐文章于 2025-06-26 17:30:14 发布

原创最新推荐文章于 2025-06-26 17:30:14 发布 · 542 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了如何使用 Axios 的请求和响应拦截器来统一处理 HTTP 请求，包括自动添加 token 到请求头和对请求结果进行统一处理的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios拦截器

请求拦截器

想要给所有的请求中都添加相关参数时，可以使用请求拦截器

axios.interceptors.request(config => {
  // 在return前对config进行处理
  // 统一在config中添加token

  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = "Bearer " + token
  }
  return config
}, err => {
  return Promise.reject(err)
})

响应拦截器

想要统一的对我们的请求结果进行处理，可以使用响应拦截器

axios.interceptors.response(res => {
  // res就是我们请求到的结果
  if (res.data.res_code === 401) {
    // 我么都把页面跳转至登录
  }
  return res
},(error) => {
  // 对响应错误做点什么
  return Promise.reject(error);
})