Vue使用轮询定时发送请求代码

 更新时间:2020年08月10日 15:12:38   作者:打代码一点也不好  
这篇文章主要介绍了Vue使用轮询定时发送请求代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

一、什么是轮询?

轮询(Polling)是一种CPU决策如何提供周边设备服务的方式,又称“程控输出入”(Programmed I/O)。轮询法的概念是,由CPU定时发出询问,依序询问每一个周边设备是否需要其服务,有即给予服务,服务结束后再问下一个周边,接着不断周而复始。 在WEB上来说就是客户端一直向服务端发起请求,服务端返回数据,不论返回什么都会再次向服务端发送请求。

二、采用定时器进行轮询

<template>
 <div></div>
</template>
 
<script>
export default {
 data() {
  return {
   num: 0
  };
 },
 created() {
  // 实现轮询
  window.setInterval(() => {
   setTimeout(this.getNewMessage(), 0);
  }, 3000);
 },
 methods: {
  // 请求是否有新消息
  getNewMessage: function() {
   console.log("请求" + this.num++ + "次");
  }
 }
};
</script>
 
<style scoped>
</style>

效果:

补充知识:vue 轮询操作

创建一个弹出框

<div>
        <el-dialog
          :visible.sync="loadingVisible"
          width="30%">
        <i class="fa fa-spin fa-star"></i>
        <span>这是一段信息</span>
      </el-dialog>
    </div>

增加按钮

<el-button type="text" @click="doing">智能推荐</el-button>

关键js代码

doing() {
        const vm = this;
        vm.loadingVisible = true;
        vm.timer = setInterval(vm.getstatus, 2000);
      },
 
 
getstatus() {
        const vm = this;
        
        vm.loadingVisible = false;
        clearInterval(vm.timer);
      }
    },

以上这篇Vue使用轮询定时发送请求代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue使用websocket实现实时数据推送功能

    vue使用websocket实现实时数据推送功能

    这篇文章主要为大家详细介绍了vue如何使用websocket实现实时数据推送,发布订阅重连单点登录功能,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • vue-cli创建的项目中的gitHooks原理解析

    vue-cli创建的项目中的gitHooks原理解析

    这篇文章主要介绍了vue-cli创建的项目中的gitHooks原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue中使用refs定位dom出现undefined的解决方法

    vue中使用refs定位dom出现undefined的解决方法

    本篇文章主要介绍了vue中使用refs定位dom出现undefined的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • VUE脚手架具体使用方法

    VUE脚手架具体使用方法

    这篇文章主要介绍了VUE脚手架具体使用方法,vue-cli这个构建工具大大降低了webpack的使用难度,小编觉得不错,下面就一起来了解一下具体使用方法
    2019-05-05
  • Vue3+Canvas实现坦克大战游戏(一)

    Vue3+Canvas实现坦克大战游戏(一)

    这篇文章将利用Vue3和Canvas编写一个童年经典游戏—坦克大战,文中的示例代码讲解详细,感兴趣的小伙伴快来跟随小编一起学习一下吧
    2022-03-03
  • 一文搞懂Vue中computed和watch的区别

    一文搞懂Vue中computed和watch的区别

    这篇文章主要和大家详细介绍一下Vue中computed和watch的使用与区别,文中通过示例为大家进行了详细讲解,对Vue感兴趣的同学,可以学习一下
    2022-11-11
  • Vue SPA单页应用首屏优化实践

    Vue SPA单页应用首屏优化实践

    这篇文章主要介绍了Vue SPA单页应用首屏优化实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 如何运行单个.vue文件问题

    如何运行单个.vue文件问题

    本文介绍了Vue的全局安装过程、查看版本、安装扩展等步骤,并提供了解决在.vue文件目录下运行报错的方法,涉及到的错误解决包括使用命令安装@vue/compiler-sfc和执行npm install命令安装依赖
    2024-10-10
  • vue实现树形结构增删改查的示例代码

    vue实现树形结构增删改查的示例代码

    其实很多公司都会有类似于用户权限树的增删改查功能,本文主要介绍了vue实现树形结构增删改查,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue3:setup的两个注意点详解

    vue3:setup的两个注意点详解

    这篇文章主要介绍了vue3.0中setup的两个注意点,本文通过两种用法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10

最新评论