有些时候,用户长时间未操作页面,后端传回来的token会过期,当过期后与多个请求响应回来相同的响应内容,只需要执行一个请求的结果。我是这么做的:
通过添加axios响应拦截器:(因为我没有用单独的文件封装axios的配置,所有此下操作是在main.js里配置的。里面用到了element-ui里的组件,例:$message.error()这个用于消息提示)
// 响应拦截器
axios.interceptors.response.use(
response => {
// 登录失效101
if (response.data.code == 0 && response.data.msg == '认证失败,请重新登录') {
source.cancel('登录信息已过期') // 取消其他正在进行的请求
// some coding
Vue.prototype.$message.error(response.data.msg)
}
return response
},
error => {
if (axios.isCancel(error)) {
// 取消请求的情况下,终端Promise调用链
return new Promise(() => {})
} else {
return Promise.reject(error)
}
}
)
该页面有多个请求,成功只提示一次:
亲测有效,欢迎大家反馈O(∩_∩)O,该文章如果对你有用的话,记得留下一个赞噢~