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

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)
    })

)