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
      }

    },

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