vue 访问后台接口(vue轮询请求解决方案的完整实例)
类别:编程学习 浏览量:1883
时间:2021-10-16 00:27:21 vue 访问后台接口
vue轮询请求解决方案的完整实例轮询的理解
其实轮询的重点在于间隔多少时间执行一次,而并非循环本身。ajax是异步请求,从发起请求到接受到响应即为一个完整的过程,这个过程所需要的时间是无法预料的,说的极端点,若请求所需的时间超过了我们轮询的间隔时间,那么是会出现很多问题的,所以轮询的间隔应该是在确保这个请求过程完成的基础之上的,这也更符合逻辑。
业务描述:
- 页面初始化显示第一页数据,随后每隔十秒当前页数据刷新
- 更改筛选条件或者更改页码直接刷新数据,随后每个十秒当前也数据刷新
业务逻辑点分析:
- 手动调用时,立即执行发起请求
- 随后每隔十秒执行一次,刷新一次列表
实现思路
- 直接先调用请求
- 在请求的成功回调函数中设置定时器setTimeout
- 在定时器内重复1.2操作
- 将1.2.3步骤封装为递归函数
// 轮询方法 polling (page) { this.getWorks(page).then(res => { this.pollingST = setTimeout(() => { clearTimeout(this.pollingST) this.polling(page) }, 10000) }) }
为什么不采用setInterval
setInterval的功能看似是完美符合轮询的概念,若我们的操作是同步代码,那么使用setInterval是没有任何问题的,问题就出在setInterval不够灵活,我们无法得知上一次请求是否已经完毕。所以setTimeout会更好一些。
需要注意的地方
在轮询中我将定时器用pollingST变量记录了下来,每次执行前必须先清除上一个定时器,因为递归的调用是在定时器内部,所以通过清除定时器就能很方便的结束轮询
完整伪代码
<script> export default { data () { return { pollingST: null } }, methods: { // 分页change事件 pageChange (params) { // 清除现有定时器 clearTimeout(this.pollingST) // 调用轮询 this.polling(params) }, // 请求接口方法 getWorks () { return new Promise(resolve => resolve({})) }, // 轮询方法 polling (params) { this.getWorks(params).then(res => { this.pollingST = setTimeout(() => { clearTimeout(this.pollingST) this.polling(params) }, 10000) }) } }, created () { // 调用轮询 this.polling({ page: 1, pageSize: 5 }) }, destroyed () { clearTimeout(this.pollingST) } } </script>
总结
到此这篇关于vue轮询解决方案的文章就介绍到这了,更多相关vue轮询解决内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue弹窗模板(Vue登录页面的动态粒子背景插件实现)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- vue项目打包上线的方法(vue项目打包以及优化的实现步骤)
- vue引入axios(vue封装axios的几种方法)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vuejs全家桶入门教程交流(Vue全家桶入门基础教程)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- vue3和vue2(Vue3对比Vue2的优点总结)
- vue中的定时函数(vue计时器的实现方法)
- vue3兼容的插件多吗(关于vue3编写挂载DOM的插件问题)
- vue项目做过哪些打包优化(Vue项目优化的一些实战策略)
- vue怎么更换自定义水印(Vue之全局水印的实现示例)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vue移动端返回在指定位置(vue移动端判断手指在屏幕滑动方向)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
- 怎么快速学好英语(怎么快速学好英语初中)
- 中国留学生都是富二代吗()
- 我们现在吃的苹果是哪里来的 原来现代苹果引入中国仅有一百多年(我们现在吃的苹果是哪里来的)
- 买绿宝不能只挑黄绿色 菜农教你3招挑,个个皮薄肉脆,香甜爆汁(买绿宝不能只挑黄绿色)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
热门推荐
- dedecms频道封面不能修改内容(DEDECMS内容页分页过多、过长问题最佳解决方案)
- 华为云阿里云腾讯云哪个服务好些(阿里云、腾讯云和华为云服务器相同配置哪个更好?)
- div内容水平垂直居中的方法(不定宽高的文字在div中垂直居中实现方法)
- laravel使用队列(基于laravel where的高级使用方法)
- mysql主从复制时突然来了一批数据(MySQL主从复制断开的常用修复方法)
- python简易版学生管理系统(python3.6实现学生信息管理系统)
- mysql索引的比较规则(MySQL的Flush-List和脏页的落盘机制)
- php简单定时执行任务(php实现 master-worker 守护多进程模式的实例代码)
- 如何访问别人的ftp服务器(如何让外网也可以访问的个人Ftp服务器)
- phpmysql网站开发入门与提高(PHP+MySQL+sphinx+scws实现全文检索功能详解)