100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > axios请求拦截和响应拦截

axios请求拦截和响应拦截

时间:2024-01-05 17:44:09

相关推荐

axios请求拦截和响应拦截

在我们平常调用接口的时候,会使用到拦截器这个工具,大致有两种用法,请求拦截和响应拦截。

请求拦截

axios.interceptors.request.use((config)=>{return config},(error)=>{return Promise.reject(error)})

解析:请求拦截这个时候请求还没用发送出去,可以在config里面加一些东西,如在请求头里面携带token,此时还没有到达服务器,error关联的是请求错误返回的信息。举个例子,当你发送请求的时候,这个时候网络被中断,请求还没有到达服务器,但是报错了,这个使用会走error,通常也会进行返回一个Promise对象。

响应拦截

axios.interceptors.response.use((config)=>{return config},(error)=>{return Promise.reject(error)})

解析:此时的请求已经到达了服务器,但是还没有到达客户端,可以对config进行一些操作,例如

进行一层结构的解析,返回return config.data,做一些统一错误处理,请求的时候只管成功,不管失败。error-------------它代表的是响应错误的返回值,如401,404,500的错误,权限不够,参数错误等一些列的错误:

代码

if(status===401){alert('权限不够') }else (status===404){alert('参数错误')}else{alert('其它错误')}

token失效的处理

service.interceptors.response.use((response) => {// dosomething},(error) => {// ! 服务器响应失败时,干些事情: 导致响应失败的原因有很多,其中之一是 token 过期// 响应失败时的error(错误对象),它经过了axios的2层包装,服务器响应的真实数据在 error.response.data 中。// axios包装的提示信息是:error.message,与服务器响应的真实数据是两回事const realData = error.response.data/* 处理token失效---后端处理 */if (error.response && realData && realData.code === 233333) {// 以上三个条件全部满足时,才说明token超时// 1. 触发actions中的logout函数,清除无效token、当前用户信息store.dispatch('user/logout')// 2. 跳转到登录页面router.push({ path: '/login' })// 3. return 一个执行错误,用于终止当前的promise执行链return Promise.reject(error)} else {/* 如果token未失效,则是其他错误 */// 1. 提示错误信息Message.error(realData.message)// 2. return 一个执行错误return Promise.reject(error)}})

view:

分析:

在请求拦截的时候此时请求还没有到达服务器。

在响应拦截的时候响应还没到达客户端。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。