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.$set 失效的坑 问题发现及解决方案)
- 使用vue独立开发组件(vue单文件组件的实现)
- vue慢动作怎么操作(vue开发之moment的介绍与使用)
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- vue做个人页面(vue简易记事本开发详解)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vue 父组件传值(Vue两个同级组件传值实现)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vue引入axios(vue封装axios的几种方法)
- vue左右联动列表(vue+iview的菜单与页签的联动方式)
- 苹果自研芯片跑分对比 A16芯片排名靠后,M1系列霸榜(苹果自研芯片跑分对比)
- X86处理器的梦魇 苹果M1自研芯片到底有多强(苹果M1自研芯片到底有多强)
- 泰剧《爱欲之神》Boom kitkong和Great合体杂志(泰剧爱欲之神Boomkitkong和Great合体杂志)
- 素人恋爱综艺火药味十足 男生为赢得芳心集体扯头花,真是出好戏(素人恋爱综艺火药味十足)
- 《囧妈》为何受抵制 春节七部影片撤档背后的责任与博弈(囧妈为何受抵制)
- 提醒 2019年起河南驾考要开设科目五 官方回应来了(2019年起河南驾考要开设科目五)
热门推荐
- python人脸识别实时教程(python dlib人脸识别代码实例)
- 使用Console调试js脚本
- 如何提高代码可读性
- thinkphp微信开发教程(微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解)
- vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)
- 微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
- python排序的三种方法(Python实现插入排序和选择排序的方法)
- js淘宝购物车效果代码(JavaScript实现电商平台商品细节图)
- python中encode中文自定义编码(详解Python解决抓取内容乱码问题decode和encode解码)
- js实现div(javascript拖曳互换div的位置实现示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9