VUE基于webscoket请求的超时setTimeout处理

今天来说说超时，我们先来简单介绍下：

说到超时，时延，我们知道有setTimeout和setInterval方法，这两个写法差不多;

两者大致的写法：
setTimeout(code,毫秒)
setInterval(code,毫秒)

只是setTimeout方法只执行一次，setInterval是隔一段时间执行一次。

setTimeout

可以写成：

//3秒执行alert弹框
setTimeout( "alert('对不起, 三秒钟已到')" , 3000 )

也可以时延直接调用某方法：

//有个方法
function fangfa（）{
      //方法区
   alert（“hello”）

}


//3秒执行该方法
setTimeout( this.fangfa , 3000 )

不能写成，就是不能直接输出字符串：

//错误写法，会报错
setTimeout( "hello" , 3000 )

我们可以把方法进行合并：

setTimeout( 
  function(){ 
      //方法区
      alert("Hello"); 
  }
, 3000);

但这种写法，如果再VUE里就不能时延this，我们可以改写成：

setTimeout(
     e =>  {
         //方法区
         this.alert("Hello"); ;
     }
 ,3000);

setInterval

这个写法同上面类似，setTimeout改成setInterval就行。略

基于webscoket时延处理

我们在发送请求的时候，有几种可能：1.对方没回；2.自己发送失败，对方没有收到；

这时候我们其实一直在等待，但是等多久？我们要给出超时提示。

这里大家会觉得使用setTimeout不就行了,没错，直接使用setTimeout，但是呢，实测中，如果你直接使用setTimeout，无论你超不超时，setTimeout它都会执行。

 setTimeout(
                e =>  {
                this.loading = false//设置一个加载
                this.$message({
                   showClose: true,
                   message: '发送超时，请重新操作',
                   type: 'error'
                });
               }
             ,30000);

但这个不是我们要的效果，我们需要的是超时才执行它，不超时就不执行。这个可能有的会有好几种办法，但是百度了下，没有看到相同的做法。

有个方法是，做个心跳监测，但是这个需要后端配合，可是后端不配合，这种抛弃。感兴趣的可以参考：

我的想法是，我们在发送的时候，设置setTimeout，如果对方回复了，那么我们就可以取消setTimeout这个定时器，这里用到clearTimeout方法。

clearTimeout

这个网上的写法是：

var chaoshi = setTimeout( "alert('对不起, 三秒钟已到')" , 3000 )//3秒执行alert弹框

//清除定时器
clearTimeout(this.chaoshi);

但是我在VUE中我很纳闷，chaoshi这个是什么类型？所以多次尝试下VUE的完整写法：

 data() {
    
    return {
        chaoshi:null,//存放setTimeout的
    }
 }

methods：{

    发送方法（）{
      //发送请求方法里
        
      this.send（请求内容）//假设这是发送的请求
      this.loging = true；//如果你设置加载中的页面用这个element加载组件
      
     //重点
        setTimeout(
                e =>  {
                this.loading = false//加载解锁
               //超时后提示语
                this.$message({
                   showClose: true,
                   message: '发送超时，请重新操作',
                   type: 'error'
                });
               }
             ,30000);

      
    }

    接收方法（）{ //假设这里是你专门接收后端返回数据的地方
       //接收内容
       this.loading = false; //接收到内容肯定是解锁加载

      //重点
       clearTimeout(this.chaoshi);
       this.chaoshi = null;//重置下这个
        
    }


}

上面这个是局部的位置，如果你的整个项目基于webscoket发送请求（主方法，全局），或者其他也行，让所有请求都等待后端回复，如果后端长时间不回复，就给出提示

在请求发送时，跟上面一样类似，只要找到发送的方法里添加setTimeout，在接收方法里取消。

例子：webscoket里的发送方法是：

sendSock(agentData, callback) {
            //超时处理，如果对方不回复就超时
            this.chaoshi = setTimeout(
                e =>  {
                this.loading = false
                this.$message({
                   showClose: true,
                   message: '发送超时，请重新操作',
                   type: 'error'
                });
               }
             ,30000);
//其他方法
}

webscoket里的接收方法是：

websocketonmessage(revData) { // 数据接收
            console.log("接收到的数据:", revData);

            //对方回复后，清除超时。
            clearTimeout(this.chaoshi);
            this.chaoshi = null;
}

附加案例

还有一种加载方式

data{
    retrun[
        loading：{}，
    ]

}

设置加载

this.loading = this.$loading({
                    lock: true,
                    text: '加载中，请稍候...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })

关闭加载，这个你可以在各种场景加，如收到后台数据，就关闭它

this.loading.close()//关闭加载

加载超时，如果没有收到后台数据，也不可能一直加载，超出多久后就超时，利用之前讲得方法，把它们写在一个位置。

this.loading = this.$loading({
                    lock: true,
                    text: '加载中，请稍候...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })


//超时就自动取消
this.refreshData = setTimeout(
            e =>  {
                        this.loading.close(),//关闭加载
                        
                        //给出超时提示
                        this.$message({
                            showClose: true,
                            message: '加载中，请检查网络或重新操作',
                            type: 'error'
                        });
                       
             }
 ,60000)//设置60秒时间

如果没有超时，要记得把超时取消，否则还会弹超时

clearTimeout(this.refreshData);//清除超时
this.refreshData = null;//重置