Vue封装异常处理,和防抖动

今天写了Vue的异常处理和Vue防抖动,思考了好久,终于写出来了,这里记录一下我写的过程。

首先说一下需求,异常处理的需求就是,判断后端传过来的code是什么,进行判断来显示。比如哦code==0就成功,code== 'not_login'就显示没有登录之类的,还有请求超时,就显示请求超时。

防抖动的需求就是让用户不能在一个时间段多次点击一个按钮

话不多说,上代码了

  •  首先先封装一个函数,其他地方都可以用这个函数,我封装在新建的一个common下名字叫warn.js的一个文件。
import { Message } from "element-ui";


export function warn(res){
  if(res.code == "message_page"){
    Message.info('对不起,该操作你没有权限!')
  }else if(res.code == "not_login"){
    Message.info(res.data.msg)
      that.$router.push({
        path:"/login"
      })
  }else{
    Message.info(res.data.msg)

  }

}
  • 然后在请求在请求的api里面判断,例如像这样
                        if(res.data.code == 0){
                           this.$message({
                             type:"success",
                             message:"登录成功"
                           });
                         }
                         else{
                           warn(res)
                         }
  • 现在要考虑防抖动了
  • 防抖动我是这样写的,在data里面初始化了res和TIMEOUT_THRESHOLD和date,这三个都有用,res是异常处理的时候需要,TIMEOUT_THRESHOLD是请求超时的初始化时间,初始化的是5s,如果超过5s就显示请求超时。date是初始化当前时间防抖动需要的。
            res:{},
          TIMEOUT_THRESHOLD: 5000,
        date: new Date(),
  • 然后在按钮的函数上面进行了,我的函数名叫submitLogin,我写的防抖动的时间是2s。就是说上次点击按钮的时间和当前点击按钮的时间都获取到,然后相减看是否大于2s。
    submitLogin(loginform) {
      var date1 = new Date();
      console.log(date1 - this.date)
      if(date1 - this.date > 2000){
       this.date = date1
         this.$refs[loginform].validate((valid) => {
           if (valid) {
          // 请求超时时间为5s
         loginsub(this.loginform, { timeout: this.TIMEOUT_THRESHOLD }).then(res =>{
                       this.res = res
                         if(res.data.code == 0){
                           this.$message({
                             type:"success",
                             message:"登录成功"
                           });
                            
                         }
                       
                     }).catch(error => {
                            if (error.code === 'ECONNABORTED') {  // 判断是否为请求超时错误
                              alert('未联网,请求超时,请联网再试')
                            }
                            else {
                              console.log('this.res.data',this.res.data)
                              warn(this.res)
                              
                            }
                            })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
      }else{
        this.$message({
          type:"info",
          message:"两秒后再试试"
        });
        this.date = date1
      }

    },
  • 现在就可以实现异常处理和防抖动了,觉得有用的话点个赞吧。

你可能感兴趣的:(vue.js,前端,javascript)