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轮询解决内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue2.0自定义指令(vue2实现provide inject传递响应式)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- vue项目打包上线的方法(vue项目打包以及优化的实现步骤)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- vue使用websocket的详细步骤(vue使用webSocket更新实时天气的方法)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- vue 中后台管理系统(Vue实现学生管理功能)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- 汉族(汉族的祖先是谁)
- 中国有几个名族(中国有几个民族没列入56个民族)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
- 没钱可以快乐吗(没钱也能快乐吗)
- 快乐是什么(快乐就是)
热门推荐
- python做出来的游戏按什么键运行(python pygame实现方向键控制小球)
- MySql中date、datetime、time类型的区别
- linux安装deb包命令(Linux deb包解压、修改等操作方法代码示例)
- SQL Server的恢复模式
- thinkphp5.0实例详解(ThinkPHP5&5.1框架关联模型分页操作示例)
- Flash遮盖其它层,z-index无效
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- js绘制平滑路径(如何利用Javascript生成平滑曲线详解)
- iis网站提示401 未授权:由于凭据无效,访问被拒绝
- typescript获取属性名(TypeScript 中如何限制对象键名的取值范围)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9