避免前端发送二次请求的解决方法

TonyH2002

已于 2023-12-14 11:41:39 修改

阅读量1k

点赞数 22

文章标签：前端 javascript 开发语言

于 2023-12-13 18:11:40 首次发布

本文链接：https://blog.csdn.net/hxbao/article/details/134978829

版权

1、 //重复请求，取消本次请求
let pending = []
let cancelToken = axios.CancelToken
let removePending = (config, f) => {
   let flagUrl = config.url + '&' + config.method
   if(pending.indexOf(flagUrl) !== -1) {
       if (f) {
           f() //执行取消操作
       } else {
           pending.splice(pending.indeOf(flagUrl),1) //把这条记录从数组中移除
       }
   } else {
       if (f) {
           pending.push(flagUrl)
       }
   }
}

2、//http request 拦截器
//ToDo：重新设置请求头机制
axios.interceptors.request.use(
   config => {
       config.cancelToken = new CancelToken((c) => {
           removePending(config, c)
       })
       let user =JSON.parse(localStorage.getItem('$user'))
       if (user) {
           config.headers['Access-Token'] = user.token
       }
       return config
   },
   err => {
       return Promise.reject(err)
   }
)

3、//http response 拦截器
axios.interceptors.response.use(
   response => {
       let response_Result=response
       removePending(response.config)
       if(response_Result.data.code){//导出这类接口没有code success
           switch (response_Result.data.code) {
               case '10000':       //10000：请求成功
                   return response_Result
               case '10001':       //10001：请检查登录是否携带token message({duration:1000,message:response_Result.data.msg,type:'error',onClose:res =>{
                       //清空token并跳转
           localStorage.clear()
           sessionStorage.clear()
           router.replace({
           path: '/login',
           query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
       })
   }})
   response_Result.data={}
   return response_Result
case '10002':       //10002：token不能为空
message({duration:1000,message:response_Result.data.msg,type:'error',onClose:res =>{
       //清空token并跳转
           localStorage.clear()
           sessionStorage.clear()
           router.replace({
           path: '/login',
           query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
           })
       }})
       response_Result.data={}
       return response_Result
   case '10003':       //10003：会话超时，需重新登录 message({duration:1000,message:response_Result.data.msg,type:'error',onClose:res =>{
           //清空token并跳转
           localStorage.clear()
           sessionStorage.clear()
           router.replace({
               path: '/login',
           query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
           })
           }})
           response_Result.data={}
           return response_Result
           case '10004':       //10004: 当前用户无权限内容
               message({duration:1000,message:response_Result.data.msg,type:'error'})
               response_Result.data={}
           return response_Result
       case '10005':       //10005: 当前用户权限获取失败
               message({duration:1000,message:response_Result.data.msg,type:'error'})
               response_Result.data={}
           return response_Result
       default :
//默认接口请求报错除code值为10000/10001/10002/10003/10004/10005之外默认走这块
//先将默认接口给返回的信息msg获取到，用于做提示框信息，然后给准备返回的response数据其他全部滞空，将status修改为40001
//这样接口就直接在第一个if判断code或者msg或者success字段时直接抛异常走catch方法
//就可以将页面当中其他员工写的请求接口错误的弹框信息和拦截器的判断重叠多次弹相同信息的问题完美解决
           let message_content = response_Result.data.msg
           response_Result={
               status:40001
           }
           message({duration:1000,message:message_content,type:'error'})
           return response_Result
   }
}
return response_Result
},
error => {
   debugger
   if (error.response) {
   switch (error.response.status) {
   case 401:
message({duration:1000,message:'请重新登录,正在前往登录页...',type:'warning',onClose:res =>{
   //清空token并跳转
   localStorage.clear()
   sessionStorage.clear()
   isShowMessage=true
   router.replace({
   path: '/login',
   query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
   })
   }})
   break;
   }
   }
   return Promise.reject(error)
   })