vue使用axios轮询请求方案

已于 2023-04-12 15:59:35 修改
阅读量2k 收藏 12
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
于 2023-01-11 09:46:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/w199809w/article/details/128639642
文章探讨了在Vue项目中如何处理实时更新的数据问题。目前采用的两种方案是定时器每2秒请求接口和请求成功后立即再次请求，但前者可能导致超时，后者则可能引发过多并发请求。作者考虑使用递归方式，在成功回调中设置延迟请求，以解决并发和超时问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

页面上需要显示一段时刻在变化的数据，数据的来源只能通过请求接口得到。希望老司机们可以给个方案或思路。

目前的采取的方案：
①在vue项目中定义一个定时器每隔2秒进行一次axios请求。
②在vue项目中当axios请求成功返回后再重新请求（子子孙孙无穷尽）。

在多次的请求中，发现中途偶尔会有超时的情况出现，如果采用方案②，显然不合适。
如果采用方案①，因为异步请求的缘故会出现多个同样的请求一起在处于pending状态，且返回时会有时间差。（不知该如何设置：相同的请求队列，前面的请求被终止）

可以尝试用递归的方式，在成功回调里设置2秒再次请求

Vue使用axios轮询获取数据
qq_38955602的博客
03-11 2429
VUE项目使用axios向后台轮询获取数据
vue axios轮询更新echarts 页面崩溃问题
weixin_51072915的博客
02-07 1074
之前做过一个项目测试发现这个问题，就是页面停留3 ，4 个小时之后页面崩溃了 后来观察了浏览器的 Memory 发现echarts 实例还有echarts 数据缓存在不断累积 解决： 刚开始看了echarts 官方api 确实提供了 echarts.clear() 清空当前实例，会移除实例中所有的组件和图表。用了以后发现作用不是很大 还是会崩溃。 那就是实例的问题了 刚开始只是加了个判断 let myEcharts if(!myEcharts){ myEcharts = echarts.init
vue轮询方法
qq_43894292的博客
12-15 1万+
1.注意问题： 一般轮询都会使用setInterval，但是单独使用它会使页面卡死。 2.下面是3秒钟轮询一次的代码 export default { data() { return { } }, mounted() { this.getList(); this.timer = window.setInterval(() => { setTimeout(() =&g
2025了，Vue3 中做轮询的几种最新方式
最新发布
caizhuangzhuang的博客
05-20 526
在 Vue3 中实现轮询请求，以下是几个值得推荐的解决方案和库（包含原生方案和第三方库），我根据实际开发经验为你整理推荐清单：方案特点适用场景包大小文档评级功能全面的请求库，内置轮询需要完整请求管理5.2kb⭐⭐⭐⭐axios + 自封装灵活可控，需自行处理简单轮询需求0kb⭐⭐rxjs响应式编程库复杂轮询逻辑32kb⭐⭐⭐组合式API工具库组合式API项目12kb⭐⭐⭐⭐具体实现方案1. 推荐首选：vue-request（专为Vue3设计）
vue axios轮询请求数据
weixin_44963140的博客
09-30 3412
点击执行，轮询查询此条数据的状态 <el-button :disabled='!scope.row.status || scope.row.executeStatus == 2' @click="handleClick(scope.row)" type="text" size="small">{{scope.row.executeStatus == 2?'执行中':'手动执行'}}&l...
关于vue axios 进行长轮询思路和中断请求方法
Cold__Star的博客
08-22 4504
长轮询一般是采用递归的方法去写，像vue种axios 就是在请求成功后进行轮询，获取新的数据状态 举个栗子： 随便一个vue文件 XXX.vue <template> <div></div> </template> <sciipt> import axios from 'axios'; export default{ data(){ return{ timeObj:null, isLoading:false, quxiao
Vue使用轮询定时发送请求代码
10-14
在现代的网络应用开发中，...总之，Vue.js中实现轮询需要使用JavaScript的定时器函数来周期性地执行请求方法。虽然轮询在某些特定场景中非常有用，但开发者应该考虑使用更加高效的通信方式，以提高应用的性能和效率。
vue ajax轮训,vue轮询请求解决方案的完整实例
weixin_34910772的博客
08-06 1300
轮询的理解其实轮询的重点在于间隔多少时间执行一次，而并非循环本身。ajax是异步请求，从发起请求到接受到响应即为一个完整的过程，这个过程所需要的时间是无法预料的，说的极端点，若请求所需的时间超过了我们轮询的间隔时间，那么是会出现很多问题的，所以轮询的间隔应该是在确保这个请求过程完成的基础之上的，这也更符合逻辑。业务描述：页面初始化显示第一页数据，随后每隔十秒当前页数据刷新更改筛选条件或者更改页码直...
Vue轮询方法
weixin_40169609的博客
09-12 950
window.setInterval(() => { setTimeout(fun(), 0) }, 5000)
在 Vue 中实现与优化轮询技术
weixin_52648900的博客
11-06 1986
轮询是一种在特定时间间隔内反复查询数据或执行操作的机制，常用于前端和后端开发中。它在实时更新页面数据、监控系统状态等场景中尤为实用。
vue利用axios来完成数据的交互
11-28
axios基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用 现在Vue官方推荐的网络通信库不再是vue-resource了，推荐使用axios。所以学习了下，总结如下。 一、功能特性 1、在浏览器中发送 XMLHttpRequests 请求 2、在 node.js 中发送 http请求 3、支持 Promise API 4、拦截请求和响应 5、转换请求和响应数据 6、自动转换 JSON 数据 7、客户端支持保护安全免受 XSRF 攻击 二、axios的安装方法（官方给了3种方法） 1、npm安装 $ npm install axios 2、b
vue2.0 axios前后端数据处理
zhangwenwu2的博客
06-01 5711
目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据。 前言：  使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个需要发送请求的组件中即时引入 为了解
VUE实践优化：轮询机制与代码结构升级
Blog of Leviash
12-19 1605
我们之前探讨过，对于包含处理状态的表格数据，我们可以通过轮询的方式进行处理（轮询更新进度条：JavaScript中的定时器和异步编程技巧然而，当我们离开页面时，定时器仍会继续触发请求，这会造成资源的浪费，因为返回的数据并没有被渲染出来。最多只能同时存在一个轮询的定时器。当用户离开页面时，定时器应被关闭。当用户重新进入页面时，如果仍有数据正在处理中，应重新启动轮询。轮询应能跨页面、跨显示数量。
vue中数据状态轮询
活宝小娜的博客
01-25 1302
如果没有单独的状态接口，把状态方法getDatasetStatus换成数据方法getTableDataList即可。最后，要在组件销毁前清空定时器，防止内存泄漏。
轮询请求
weixin_30478619的博客
06-11 784
最近工作中遇到一个问题，发现用简单的AFNetworking封装，不能满足需求。一般情况下，所有的请求会指定到一个url,然后所有的请求都用AFNetworking的二次封装方法。如自己封装的GET,POST方法.这种封装方式也能满足大多数的需求。 我们的情况稍有不同，请求API实际不多，但是都在一个控制器之内。大概是一个POST和若干个GET,具体场景大概是这个样子。 1、向后台post一个...
Vue中使用setTimeout实现轮询操作
m0_59102614的博客
11-07 2559
Vue中使用setTimeout实现轮询操作 解决问题：1. 使用setInterval，网络慢的情况下，前一条请求未返回结果，后一条请求定时发送了；2.请求报错，停止轮询请求；3.轮询获取表格数据，若新建数据，调用几次刷新表格，创建几个timer；4. 网速慢的情况下，轮询结果未返回时，切换路由，timer清除不掉。
前端和后台进行WebSocket长连接和axios轮询的方法（vue框架）
热门推荐
JCat的博客
04-26 2万+
前言 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒）...
axios轮询请求阻塞封装加时间戳或者随机数
mo911108的博客
06-20 632
由于Chrome锁定了缓存，并在再次请求相同的资源之前等待上一个请求的结果，所以请求被阻塞， 解决方案：axios封装在请求中添加了一个参数，值为时间戳或者随机数 ，使请求具有唯一性 // 创建请求拦截 request.interceptors.request.use( (config) => { var user = JSON.parse(window.sessionStorage.getItem("user")); if (user) { var t
axios轮询渲染数据
10-09
在Vue.js、React等框架中，你可以这样使用axios进行轮询： 1. 定义一个函数，比如`fetchData`，用来发起GET请求并处理响应： ```javascript function fetchData(url) { axios.get(url) .then(response => { // ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值