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

2024-09-27 09:49:24

一、什么是轮询？

轮询（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写一个简单的倒计时按钮功能

在项目开发里,我们经常会遇到发送验证码.点击了之后有60秒倒计时的按钮,很常见却也很简单,但是在写这个按钮的时候有个别地方还要注意下,今天写出来,如有问题欢迎指正! 完成的效果如下: 为了更快显示出效果,我把时间设成了5秒.按钮在点击之后会出现倒计时,同时按钮变为不可点击状态,样式也发生变化,鼠标悬浮上的样子也会发生变化. 接下来我们用代码来实现: <button class="button" @click="countDown"> {{content}
简单实现vue验证码60秒倒计时功能

本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下 html <span v-show="show" @click="getCode">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span> js data(){ return { show: true, count: ''
VUE简单的定时器实时刷新的实现方法

说明:我只是一个刚入门的小前端,你们可以指导我,但千万不要喷我,虽然我知道我很垃圾!人吗,都是要成长的!大佬,请多多指教!!! 我前段时间刚刚写了一个类似余股票的项目,上边的K线图是要实时去刷新的,所以要用vue做一个心跳,当然大家也可以选择用websocket,大佬们感觉肯定很简单,但是我只是一个刚入门的小前端,特此记录一下. 思路其实思路很简单,首先要了解vue的生命周期和vue的内置函数,其思路就是先定义一个定时器,然后去定时请求后台,到最后关闭这个定时器,哈哈,是不是都是废话,但是确实
Vue使用轮询定时发送请求代码

一.什么是轮询? 轮询(Polling)是一种CPU决策如何提供周边设备服务的方式,又称"程控输出入"(Programmed I/O).轮询法的概念是,由CPU定时发出询问,依序询问每一个周边设备是否需要其服务,有即给予服务,服务结束后再问下一个周边,接着不断周而复始. 在WEB上来说就是客户端一直向服务端发起请求,服务端返回数据,不论返回什么都会再次向服务端发送请求. 二.采用定时器进行轮询 <template> <div></div> </
vue中axios处理http发送请求的示例（Post和get）

本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format axios文档在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装使用node npm install axios 使用cdn <scrip
Java实现一个简单的长轮询的示例代码

目录分析一下长轮询的实现方式长轮询与短轮询配置中心长轮询设计配置中心长轮询实现客户端实现服务端实现分析一下长轮询的实现方式现在各大中间件都使用了长轮询的数据交互方式,目前比较流行的例如Nacos的配置中心,RocketMQ Pull(拉模式)消息等,它们都是采用了长轮询方的式实现.就例如Nacos的配置中心,如何做到服务端感知配置变化实时推送给客户端的呢? 长轮询与短轮询说到长轮询,肯定存在和它相对立的,我们暂且叫它短轮询吧,我们简单介绍一下短轮询: 短轮询也是拉模式.是指不管
Vue使用axios发送请求并实现简单封装的示例详解

目录一.安装axios 二.简单使用 1.配置 2.发送请求三.封装使用 1.创建js封装类 2.配置 3.发送请求一.安装axios npm install axios --save 二.简单使用 1.配置 main.js中加入如下内容 // 引入axios --------------------------------------------------- import axios from 'axios' Vue.prototype.$axios = axios Vue.proto
andriod如何搭建自己的轮询框架

很多时候Android应用需要每间隔一段时间向服务器请求数据,如果服务器数据有更新则通知界面变化.Android中最常用的红点一般采用的就是轮询,红点是为了在数据有更新时及时的提醒用户,比如朋友圈更新,当用户的朋友圈更新时就会显示红点,就是通过移动端不断的向服务器查询朋友圈的更新状态. 相关知识点在实现轮询框架时会主要会要到下面两个类,会结合轮询框架对这三个类进行讲解,在应用中分析会理解更加深刻. 1.IntentService IntentService是一种特殊的Service,继承了Se
Flask框架运用Ajax实现轮询动态绘图

Ajax是异步JavaScript和XML可用于前后端交互,在之前<Flask 框架:运用Ajax实现数据交互>简单实现了前后端交互,本章将通过Ajax轮询获取后端的数据,前台使用echart绘图库进行图形的生成与展示,后台通过render_template方法返回一串JSON数据集,前台收到后将其应用到绘图库上,实现动态监控内存利用率的这个功能. 首先LyShark先来演示一下前端如何运用AJAX实现交互,通过$.ajax定义ajax开始标志,并指定url,type,datetype等信息,
Golang加权轮询负载均衡的实现

目录实现加权轮询负载均衡思路加权轮询负载均衡代码测试代码实现加权轮询负载均衡思路代码实现一个加权负载均衡 Weight 初始化时对节点约定的权重 currentWeight 节点临时权重,每轮都会变化 effectiveWeight 节点有效权重,默认与Weight相同 totalWeight 所有节点有效权重之和:sum(effectiveWeight) 代码实现一个加权负载均衡 currentWeight = currentWeight
Java负载均衡算法实现之轮询和加权轮询

目录 1.普通轮询算法 2.加权轮询算法 2.1.实现方式一 2.2.实现方式二(重点难点) 2.2.1.概述 2.2.2.举个例子理解算法 2.2.3.代码实现总结 1.普通轮询算法轮询(Round Robin,RR)是依次将用户的访问请求,按循环顺序分配到web服务节点上,从1开始到最后一台服务器节点结束,然后再开始新一轮的循环.这种算法简单,但是没有考虑到每台节点服务器的具体性能,请求分发往往不均衡. 代码实现: /** * 普通轮询算法 */public class RoundRob
基于Rxjava实现轮询定时器

本文实例为大家分享了Rxjava实现轮询定时器的具体代码,供大家参考,具体内容如下作用 1.实现了延迟若干毫秒后,执行next操作,只执行一次 2.实现了每隔若干毫秒后,执行next操作,可执行多次工具类源码 /** * Copyright 2015-2018 Hive Box. */ package com.fcbox.locker.shrail.utils; import android.support.annotation.NonNull; import com.fcbox.locke
C#实现Nginx平滑加权轮询算法

本文实例为大家分享了C#实现Nginx平滑加权轮询算法的具体代码,供大家参考,具体内容如下代码很简单,算法很经典! 1. 定义实体类 public struct ServerConfig { //初始权重 public int Weight {get;set;} //当前权重 public int Current {get;set;} //服务名称 public string Name {get;set;} } 2. 算法 public static int NextServerIndex(S

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

相关推荐

随机推荐