Vue中如何统一处理Ajax请求的错误响应？

夏侯梦玲提问于 2026-03-25 23:19:20 阅读 17

前端

我在用Vue做项目，想通过拦截器统一处理接口返回的错误（比如token过期），但不知道为啥拦截器没生效，求指点！

我用的是axios，已经写了响应拦截，但401错误还是直接抛到组件里了，没走拦截逻辑。

<script>
import axios from 'axios'

const instance = axios.create()
instance.interceptors.response.use(
  res => res,
  err => {
    if (err.response?.status === 401) {
      console.log('token失效，跳转登录')
      // 这里没执行！
    }
    return Promise.reject(err)
  }
)

export default instance
</script>

我来解答赞 6 收藏

反馈

1 条解答

东方利娜 Lv1

我看你这个拦截器配置基本是对的，但可能漏了个小细节。我的做法是确保创建的axios实例确实被使用了，而且在Vue组件里调用接口时也要用这个实例。

首先确认你在Vue组件里是这样发起请求的：

import axios from './你的axios实例文件'



axios.get('/api/some-endpoint')

  .then(res => {

    // 处理响应

  })

  .catch(err => {

    // 这里应该不会直接走到，因为拦截器会处理

  })

还有个小技巧，建议在拦截器里加个console.log看看是不是真的没走这里：

instance.interceptors.response.use(

  res => res,

  err => {

    console.log('进入拦截器啦') // 加这行调试

    if (err.response?.status === 401) {

      console.log('token失效，跳转登录')

    }

    return Promise.reject(err)

  }

)

如果还是不行，检查下是不是有多个axios实例混用了。这种坑我踩过不少次，累得够呛。希望这些建议能帮你解决问题。

2026-03-25 23:20