vue，axios处理同一个接口多次访问的执行顺序问题

最新推荐文章于 2024-07-14 11:22:16 发布
最新推荐文章于 2024-07-14 11:22:16 发布
阅读量5.5k 收藏 6
点赞数
文章标签： vue axios 异步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36106085/article/details/98208636
版权

碰到个问题记录一下，就是axios同时多次请求同一个接口（参数不同）导致数据混乱的问题，就是先点击A，马上再点击B，结果A请求数据的速度比B的慢，导致，展示数据的时候B的结果先出来，又马上闪成A请求的数据了。这里有一种解决办法，在点击新的接口请求时，关闭之前正在pending的接口请求。
在这里插入图片描述
在已经封装好的axios方法里面，加上红框中代码，然后再在你需要的vue文件方法里面加上如下代码
在这里插入图片描述
在这里插入图片描述
这样你每点击一个事件触发新的请求时，之前仍在pending的请求就会被强制关闭了

Mr丶零一
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
axios 同时多个请求_用 axios 对同一个 URL 同时发起多个请求（不同参数），返回的 data 错乱...
weixin_39945871的博客
12-20 968
前端 Vue，后端 Java。后端生成 API 供前端调用。所有 API 的 URL 地址是同一个，只是对不同的 API 传递不同的参数。参数格式如下：let data = {'username': 'admin','password': 'admin','methodName': 'method1','boId': 'bo1','returnType': 'json','parameters':...
vue axios连续访问同一个接口不同参数请求数据混乱
Aa_duidui的博客
09-13 2339
vue axios连续访问同一个接口不同参数请求数据混乱
vue 一个接口调用完获取到数据再调用另一个接口
最新发布
m0_58373910的博客
07-14 156
【代码】vue 一个接口调用完获取到数据再调用另一个接口。
axios同时多次请求同一个接口（参数不同）导致返回数据混乱
热门推荐
liona_koukou的博客
10-08 1万+
更新：遇到这种情况，首先请后台排查是否是后台问题，我们的项目在遇到不同接口数据也紊乱了之后最终发现是后台问题。。 在这期间前端背了很久的锅，哭 vue项目里使用axios对同一个接口同时进行多次请求导致返回数据混乱，比如：第一次请求返回的数据跑到别的请求返回里 在尝试了一些解决方法之后个人还是建议直接与后台沟通更改接口逻辑，将所有参数放到数组里后台统一接收并返回所有数据再由前端进行数据的拆分...
前端axios fetch 解决接口请求响应数据返回快慢不均导致的数据错误问题
hyupeng1006的博客
05-22 2340
实时搜索都会面临一个通用的问题，就是：浏览器请求后台接口都是异步的，如果先发起请求的接口后返回数据，列表/表格中显示的数据就很可能会是错乱的。会引发的bug如下：搜索的时候，连续快速输入或者删除关键字，搜索结果和搜索关键字不匹配。怎么解决呢？在想解决方案之前，得想办法必现这个问题，靠后台接口是不现实的，大部分情况下后台接口都会很快返回结果。
axios取消请求，解决接口返回顺序错乱问题
芝芝为荔枝
04-07 697
下面的方案适用于系统中的某个请求的取消，项目的请求使用axios封装使用场景：当页面有多个 tab，例如年、月、日的列表数据，当点击切换的时候要获取对应的数据，此时如果快速点击在tab直接反复横跳会出现下面的问题：重复请求，切换了tab旧的页面已经看不见，没必要存留如果使用同一套UI组件，只是数据的改变，异步的原因可能当前tab请求已经结束，然后旧的请求后结束，导致当前的页面的数据渲染出来对应不上tab使用了去解决这个问题，下面讲解如何去封装。
前端同时访问后端同一接口两次，但只有后面那次请求有返回数据
Rosen's
07-12 5055
两次接口都是成功了的，但是第一次请求的返回值没有数据，状态为200. 最开始我都认为是前端调用的问题，两次请求之间加上延时还是不行。我自己写了个脚本测试也是如此，通过反复测试，发现如果当第一次请求没有执行完之前，发起第二次请求，那么第一次请求就绝对没有数据，但也是请求成功的。 这个接口稍微有点特殊，普通的接口直接返回一个DTO给前端，由于这个接口的数据格式比较灵活，所以直接处理成Gson，通过response对象写入。 public class BaseController { protecte.
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
然而，在某些情况下，尤其是当对同一个接口连续发起请求时，可能会遇到返回数据混乱的问题。这主要是由于网络延迟、请求并发控制等因素导致请求的顺序与预期不符，从而影响了前端的数据处理。本文将深入探讨这个问题...
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
01-18
我就废话不多说了，大家还是直接看代码吧~ Axios.all([request1, request2, request3]) .then( Axios.spread((area, acct,...补充知识：vue，axios处理同一个接口多次访问的执行顺序问题 碰到个问题记录一下，就是ax
Vue下拉框回显并默认选中随机问题
12-09
- 在处理异步数据时，可以使用`Promise.all()`或者`async/await`来确保多个请求按顺序执行。这样能保证下拉框数据先加载，然后才是回显数据。 - 如果使用`axios`等HTTP库，可以利用`then`或`.catch`来控制代码流，...
vue实现文件分割与合并
04-01
在Vue.js框架中，文件的分割与合并是一个常见的需求，特别是在处理大文件上传、分片下载或分布式存储等场景。本文将深入探讨如何利用Vue.js实现这一功能。 首先，我们需要理解文件分割的基本概念。文件分割是指将一...
vue 多个页面调同一个接口，传不同的参数，使用 Vuex 来实现传不同参数调统一接口
小白菜的博客
07-10 4953
1、在 api 文件夹下的 api.js 下 import https from "@/utils/axios"; // 引入在 utils下的 axios.js 中封装的请求 export const pageOfInfoAtES = function(params) { let url = "/xxx/pageOfInfoAtES"; return https(url, params, "post"); }; 2、在 store文件夹下的 modules文件夹下新建 getInfo.j
2021-05-14 解决短时间内向同一个接口发送多次请求时候，后台只返回一次结果的问题
WenLong_____的博客
05-14 365
解决短时间内向同一个接口发送多次请求时候，后台只返回一次结果的问题 可以给请求添加一个无关的参数，并设置为不同的值！ 转载于:https://www.cnblogs.com/hsmWorld/p/10173242.html
Vue项目封装公共方法
Cc
07-06 536
vue项目中，为了拒绝一样的代码，反复的调用，简化代码。 可封装方法，多次调用接口。 // 通话记录-公共方法 publicb(data) { axios.post(this.requestUrl +"/call_center_api/cc_call_records/callRecordPage", data) .then(res => { this.
浅谈es5如何保证并发请求的返回顺序
Aays2790的博客
07-27 483
最近在公司实习写的是es5，在和回调地狱经过一番拉扯之后写下这篇文章，也算是体验了一把没有promise的时代假设我们的div有一个日历列表，但是由于大小关系只能每次显示2天的信息，项目限制只能使用，不能使用es6的promise,且后端给我们的接口只能每次请求一个具体日期的数据例如现在的需求是首屏加载2个item,有些人会觉得这还不简单吗，先请求第一个，再在回调里面请求第二个确实如此，那假如我们有20个，200个item呢，就会掉入。
前端多次发起同一个请求或调用同一个方法，如何保证后台处理顺序和发起顺序一致
期待变成大神的博客
10-14 1095
前端多次发起同一个请求或调用同一个方法，如何保证后台处理顺序和发起顺序一致
Vue3前端异步方法调用的执行顺序问题
wewowe1的博客
05-22 1994
在下面的节点单击事件方法中调用了getSheetNum()这个方法，由于这个方法每触发一次就向后台传参查询一次，所以每次执行顺序如果需要让函数在方法内先于后续代码调用，那么可以使用或 Promise 链式调用的方式来解决这个问题。awaitawait如果你不想使用，可以使用 Promise 的链式调用方式，将后续代码全部写在一个.then()回调中，并在第一个.then()回调中获取到异步方法的返回结果。
多次异步请求，结果接口返回不同顺序的问题
LS_952754的博客
06-23 2108
多次异步请求，结果接口返回不同顺序的问题
在vue中axios调用多个接口跨域问题
09-05
在Vue中使用axios调用多个接口跨域问题可以通过设置代理来解决。 1. 首先，在Vue项目根目录下找到config文件夹中的index.js文件。 2. 打开index.js文件，找到dev对象中的proxyTable选项。该选项允许我们配置代理。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值