怎么选择网站开发公司,网站开发岗位就业分析,别人给公司做的网站字体侵权吗,百度seo关键词优化排行在现代前端开发中#xff0c;我们经常需要向服务器发送 HTTP 请求#xff0c;并根据响应内容做不同的处理。axios 是一个流行的 HTTP 库#xff0c;提供了 拦截器 功能#xff0c;可以在请求和响应阶段插入自定义逻辑#xff0c;这使得我们在处理认证、错误提示等场景时更…在现代前端开发中我们经常需要向服务器发送 HTTP 请求并根据响应内容做不同的处理。axios 是一个流行的 HTTP 库提供了 拦截器 功能可以在请求和响应阶段插入自定义逻辑这使得我们在处理认证、错误提示等场景时更为简洁、统一。
本文将讲解如何利用 axios 的请求拦截器和响应拦截器来处理 token、重定向、错误提示等场景并附上一些常见的面试问题。
一、代码实现
首先我们来看一个使用 axios 的拦截器实例代码
import axios, { type AxiosResponse } from axios
import router from /router
import { ElMessage } from element-plus
import { ResultEnum } from /enums/ResultEnum
import { TOKEN_KEY } from /enums/SystemEnum// 创建 axios 实例
const AXIOS axios.create({baseURL: /lili-api,headers: {Content-Type: application/json;charsetutf-8}
})// 请求拦截器
AXIOS.interceptors.request.use((config) {// 从 localStorage 中获取 tokenconst token localStorage.getItem(TOKEN_KEY)if (token) {// 确保 headers 存在config.headers config.headers || {}config.headers.Authorization Bearer ${token} // 使用标准的 Bearer 认证方式}return config},(error) {console.error(请求错误, error)return Promise.reject(error)}
)// 响应拦截器
AXIOS.interceptors.response.use((response) {const { code, message } response.dataswitch (code) {case ResultEnum.NO_AUTH:// 无权限清除 token 并重定向localStorage.removeItem(TOKEN_KEY)router.push(/login)breakcase ResultEnum.LOGIN_FAIL:// 登录失败显示消息并清除 tokenElMessage.error(message || 登录失败)localStorage.removeItem(TOKEN_KEY)breakcase ResultEnum.SUCCESS:// 成功响应直接返回 datareturn response.data as AxiosResponseHttpResponsedefault:// 其他错误状态显示错误消息if (message) {ElMessage.error(message)}break}return response.data},(error) {// 响应错误的处理if (error.response) {ElMessage.error(请求错误${error.response.status})} else {ElMessage.error(网络错误请检查您的网络连接)}console.error(响应错误, error)return Promise.reject(error)}
)export default AXIOS二、代码详解
让我们一步步分析这个代码实现。
1. 创建 axios 实例
const AXIOS axios.create({baseURL: /lili-api,headers: {Content-Type: application/json;charsetutf-8}
})这里用 axios.create() 创建了一个 axios 实例 AXIOS。这样做的好处是可以给该实例绑定一个特定的基础 URL (baseURL)以后所有用 AXIOS 发送的请求都会自动加上这个 URL 前缀省去了我们在每个请求里手动写基础路径的麻烦。
2. 请求拦截器
AXIOS.interceptors.request.use((config) {const token localStorage.getItem(TOKEN_KEY)if (token) {config.headers config.headers || {}config.headers.Authorization Bearer ${token} // 使用标准的 Bearer 认证方式}return config},(error) {console.error(请求错误, error)return Promise.reject(error)}
)请求拦截器会在每个请求发送前执行它主要用来
检查 localStorage 是否有 token。如果有将其添加到请求头的 Authorization 字段以 Bearer 格式添加更符合 RESTful API 认证标准。添加 Content-Type 为 application/json;charsetutf-8表示请求体的数据格式是 JSON。使用 console.error 方便调试输出请求拦截阶段的错误。
3. 响应拦截器
AXIOS.interceptors.response.use((response) {const { code, message } response.dataswitch (code) {case ResultEnum.NO_AUTH:localStorage.removeItem(TOKEN_KEY)router.push(/login)breakcase ResultEnum.LOGIN_FAIL:ElMessage.error(message || 登录失败)localStorage.removeItem(TOKEN_KEY)breakcase ResultEnum.SUCCESS:return response.data as AxiosResponseHttpResponsedefault:if (message) {ElMessage.error(message)}break}return response.data},(error) {if (error.response) {ElMessage.error(请求错误${error.response.status})} else {ElMessage.error(网络错误请检查您的网络连接)}console.error(响应错误, error)return Promise.reject(error)}
)响应拦截器主要功能是根据响应的状态码做出不同处理
ResultEnum.NO_AUTH无权限状态清除 token并重定向到登录页。ResultEnum.LOGIN_FAIL登录失败状态弹出错误提示并清除 token。ResultEnum.SUCCESS请求成功时直接返回数据。其他错误在 switch 语句中处理其他未知状态码弹出错误信息提示。
同时为了更全面地处理错误情况响应错误 error 的处理阶段会显示更详细的状态码错误信息或者在网络错误时给予用户相应提示。 三、面试中的常见问题
下面总结一些面试中关于 axios 拦截器的常见问题及答案示例
1. 拦截器的作用是什么
回答示例拦截器允许我们在请求发出前和响应返回后插入自定义逻辑。常见用途包括在请求前检查认证 token 并添加到请求头、在响应后根据状态码处理错误、自动重定向等。拦截器可以减少代码重复使请求的处理更集中、统一。
2. 为什么使用 axios.create 而不是直接用 axios
回答示例axios.create 创建了一个独立的 axios 实例可以在这个实例上设置独特的基础配置比如 baseURL、超时时间等。这种方式更模块化适用于不同的 API有助于项目中不同请求模块的管理。
3. 为什么要在请求头中设置 Content-Type
回答示例Content-Type 告诉服务器请求体的数据格式。设置为 application/json表示我们发送的数据是 JSON 格式这样服务器就知道如何解析请求数据。这种设置在 RESTful API 中是很常见的。
4. 为什么在无权限和登录失败时清除 token
回答示例NO_AUTH 和 LOGIN_FAIL 表示当前的 token 已失效过期或被篡改。为了安全性我们在这种情况下会清除 token 并重定向到登录页这样可以确保用户在下一次请求前先重新登录获取新的 token。
5. 响应拦截器返回 response.data as AxiosResponseHttpResponse 的作用是什么
回答示例response.data as AxiosResponseHttpResponse 是为了确保响应数据符合 HttpResponse 类型让代码获得类型提示和安全检查的好处。这对 TypeScript 项目尤为重要可以及时发现类型不匹配的问题提升代码的可靠性。
6. 如何在拦截器中实现全局的加载动画
回答示例可以在请求拦截器和响应拦截器中控制加载动画的显示和隐藏。在请求拦截器里显示加载动画在响应完成或失败时隐藏它。通过全局状态管理工具如 Vuex控制 loading 状态可以实现全局的加载效果。
