vue-axios-github解密：5分钟理解axios拦截器实现请求/响应统一处理

vue-axios-github解密：5分钟理解axios拦截器实现请求/响应统一处理

vue-axios-github是一个基于Vue全家桶与axios构建的前端项目，专注于实现登录拦截、登出功能及拦截器等核心功能。本文将带你快速掌握axios拦截器在实际项目中的应用，学会如何统一处理请求与响应。

拦截器：axios的强大武器 🛡️

在现代前端开发中，我们经常需要对所有请求和响应进行统一处理，比如添加认证令牌、处理错误状态码等。axios拦截器正是为解决这类问题而生的强大工具，它分为请求拦截器和响应拦截器两种类型。

请求拦截器：统一配置请求头

请求拦截器允许我们在发送请求前对其进行修改。在vue-axios-github项目中，请求拦截器的实现位于src/http.js文件中：

// http request 拦截器 axios.interceptors.request.use( config => { if (store.state.token) { config.headers.Authorization = `token ${store.state.token}` } return config }, err => { return Promise.reject(err) } )

这段代码的核心功能是：当store中存在token时，自动为所有请求添加Authorization请求头，实现了认证信息的统一管理。

响应拦截器：集中处理错误状态

响应拦截器则用于在接收到响应后进行统一处理。同样在src/http.js中，我们可以看到响应拦截器的实现：

// http response 拦截器 axios.interceptors.response.use( response => { return response }, error => { if (error.response) { switch (error.response.status) { case 401: // 401 清除token信息并跳转到登录页面 store.commit(types.LOGOUT) // 只有在当前路由不是登录页面才跳转 router.currentRoute.path !== 'login' && router.replace({ path: 'login', query: { redirect: router.currentRoute.path } }) } } return Promise.reject(error.response.data) } )

这段代码实现了对401错误状态的统一处理：当服务器返回401（未授权）状态码时，自动清除本地token并跳转到登录页面，同时记录当前路由以便登录后返回原页面。

项目中的拦截器应用场景

1. 登录状态管理

在vue-axios-github项目中，拦截器与Vuex状态管理（src/store/store.js）和路由（src/router.js）紧密结合，实现了完整的登录状态管理流程：

• 登录成功后，token存储在Vuex中
• 请求拦截器自动附加token到请求头
• 响应拦截器处理token失效情况

2. 请求超时处理

项目中还设置了全局的请求超时时间：

// axios 配置 axios.defaults.timeout = 5000

这意味着所有请求如果在5秒内没有得到响应，将自动超时并触发错误处理。

快速上手：使用vue-axios-github项目

要开始使用这个项目，只需执行以下命令：

git clone https://gitcode.com/gh_mirrors/vu/vue-axios-github cd vue-axios-github npm install npm run dev

项目的核心配置都集中在src/http.js文件中，你可以根据自己的需求修改拦截器逻辑，实现更多定制化功能。

总结：拦截器带来的开发效率提升

通过axios拦截器，vue-axios-github项目实现了：

• 统一的认证信息管理
• 集中的错误处理机制
• 一致的请求配置
• 简化的业务逻辑代码

这种设计模式不仅提高了代码的可维护性，还大大减少了重复代码，让开发者可以更专注于业务逻辑的实现。

希望本文能帮助你快速理解axios拦截器的工作原理和应用方法。如果你想深入学习，可以查看项目中的src/http.js文件，里面包含了完整的拦截器实现代码。