for循环异步axios请求导致顺序不一致

最新推荐文章于 2023-11-30 10:30:36 发布
最新推荐文章于 2023-11-30 10:30:36 发布
阅读量630 收藏 3
点赞数 2
分类专栏： vue3 TypeScript 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43532275/article/details/128948079
版权

需求：前端利用for循环遍历一个接口获取数据，利用axios请求数据中的地址

问题：前端页面每次渲染的顺序不一致

原因：在钩子函数created/setup中，多个axios请求的顺序并不是依照代码编写的顺序执行的。因为axios发送异步请求，所以每个请求接收到反馈的时间总不相同。事实证明，for循环在axios请求尚未执行完毕时就开始执行了！

解决方法：（加了await是最快解决的）

 

圆周率呀
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue for循环中使用axios无法正常获取数据
刘杨造梦的博客
02-22 1644
需求：有个数组，这个数组里存的是ID，通过这个ID获取ID的数据 解决思路：for循环内使用axios请求数据并赋值到数组 问题：赋值数组在循环外console为空白 原因：axios属于异步操作，for属于同步操作，axios还没处理完，for就结束了，自然console里没有任何数据了 解决方案： async go(type, event) { for(var i=0;i<this.count.length;i++){ await this.$axios .post("/get",
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
主要介绍了详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue项目中axios请求顺序
weixin_51897979的博客
07-19 1141
今天在写Vue项目时候时，发现有一个axios请求发送失败，返回的状态是200，反思排查发现因为它所需要的参数是undefined，该参数id来自于另一个axios请求，然后把这两个请求写在一起了。 解决方案 1，将一个axios请求嵌套在另一个请求的处理操作中。 2，watch监听，当值发生改变时，再调用第二个请求方法 ...
同一个js方法中两段ajax执行顺序不确定
zym2895756的博客
12-14 4003
原因：默认是异步执行 解决：加入async:false ,使其顺序执行
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题/前端请求同一ajax 返回快慢会覆盖问题
nvliya的博客
05-06 2004
1.ajax的async属性控制同步和异步，设置为（false）同步请求 2.定义一个全局总数变量，记录每次服务的次数，判断每次调用的第几次和总数是否一致，一致就执行。 data(){ return{ arry:[], num:0, } }, methods:{ d1(){ ...
vue请求如何按顺序执行
最新发布
Keep__Me的博客
11-30 2442
这时候就需要控制请求的执行顺序，这里我提供一种方法来实现请求的顺序控制，我认为这个方法写起来是最简单最容易理解的。我们有时候会碰到这种情况，需要连续发送两个请求，第二个请求需要用第一个请求的某个返回值作为参数来作为第二个请求的请求参数。首先是正常发送第一次请求，然后在第一次请求的回调函数then中，写一句return 来发送第二次请求。但是存在一个问题：两个请求都是异步的，他并不按照我们期望的先后顺序来执行。再.then，这里的返回结果就是第二次请求的结果。这样我们就实现了两个请求的顺序执行。
解决for循环中异步请求顺序不一致的问题
如需功能开发提供开发说明，请发送邮件至[email protected]
01-07 1100
解决for循环中异步请求顺序不一致的问题 for循环，再把循环出来的ID再进行二次请求 这就导致一个问题 请求结果返回顺序不一致 原因：异步请求会把回调事件放入微任务事件队列，宏任务执行完毕再执行微任务，具体参考事件队列机制 解决方法： 通过map方法进行循环请求 将异步请求方法封装起来，返回一个promise 这样将会返回一个具有多个promise的数组 通过promise.all()方法把p...
vue for循环中按顺序执行axios请求
qq_37656005的博客
12-15 5957
**vue for循环中按顺序执行axios请求** 需求：前端利用for循环遍历一个接口获取信息，利用promise可以保证每次接口遍历正常后统一保存返回的数据
关于js中for...in循环对象时，输出key值顺序混乱问题
weixin_52755319的博客
03-31 4123
那这个时候，通过线性结构来存储数据，查找肯定的快的，但是如果涉及到大量的修改数据，那么动一发而牵全身，是非常耗性能的，所以数据多了，v8采用了慢排序。循环对象时，顺序为什么会乱？
解决 for循环异步请求 导致异步请求内部的代码 不按顺序执行的问题
jingzhi1230的博客
04-19 5191
1.问题原因 let data = [1,2,3,4,5]; for(i=0;i<data.length;i++){ let d = data[i]; $.get("getById?id="+d,function(data){ console.log(i) }) //一次循环结束 } //[0,3,2,4,1] 因为for循环是在每次...
解决vue项目axios每次请求session不一致的问题
01-18
1、vue开发后台管理项目，登录后，请求数据每次session都不一致，后台返回未登录，处理方法打开main.js设置： // The Vue build version to load with the `import` command // (runtime-only or standalone) has ...
详解JavaScript for循环中发送AJAX请求问题
10-22
主要为大家剖析了JavaScript for循环中发送AJAX请求问题，感兴趣的小伙伴们可以参考一下
axios压缩包资源，用于异步请求
07-13
axios压缩包资源，用于异步请求
vue异步axios获取的数据渲染到页面的方法
10-18
今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用axios请求时,发送formData请求的示例
10-16
今天小编就为大家分享一篇使用axios请求时,发送formData请求的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue，axios处理同一个接口多次访问的执行顺序问题
qq_36106085的博客
08-02 5459
碰到个问题记录一下，就是axios同时多次请求同一个接口（参数不同）导致数据混乱的问题，就是先点击A，马上再点击B，结果A请求数据的速度比B的慢，导致，展示数据的时候B的结果先出来，又马上闪成A请求的数据了。这里有一种解决办法，在点击新的接口请求时，关闭之前正在pending的接口请求。 在已经封装好的axios方法里面，加上红框中代码，然后再在你需要的vue文件方法里面加上如下代码 这样你...
项目实训记录（十）——axios循环发送请求顺序执行
pinkray_c的博客
06-04 1584
2.1 出现问题：axios循环发送请求并没有按顺序执行 2.1.1 错误代码 2.1.2 代码实现逻辑 2.1.3 　出错信息 2.2　解决过程分析 2.2.1　错误部分 2.2.2　解决await在forEach不起作用 2.2.3　解决方法内axios通信顺序问题 ......
Vue中axios请求顺序问题
wy827349995的博客
04-18 5552
问题 今天在写Vue时，发现有一个axios请求发送失败，因为它所需要的参数是undefined的。该参数id来自于另一个axios请求。 讲道理，我在created钩子中按照如下图所示写好代码。 方法getStudentInfo( )执行后会初始化当前的studentInfo对象，然后getVerify( )以该对象中的sid为参数继续发送请求，从而初始化verify对象。目前的情况是veri...
ios循环调用同一个接口_详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题...
weixin_39559369的博客
12-22 465
业务上出现一个问题：如果连续对同一个接口发出请求，参数不同，有时候先请求的比后请求的返回数据慢，导致数据顺序混乱，或者数据被覆盖的问题，所以需要控制请求的顺序。解决方法:1.直接跟后台沟通，将所有参数放到数组里后台统一接收并返回所有数据再由前端进行数据的拆分使用。2.对于出现返回的数据混乱问题。假设场景： 页面中需要对三个部门请求对应的部门人员，三个部门人员的数据为一个二维数组，连续发送请求，但由...
如何解决axios异步请求执行顺序不正确的问题
03-08
可以使用async/await或者Promise链来解决axios异步请求执行顺序不正确的问题。可以将多个请求封装成一个Promise数组，然后使用Promise.all()方法来等待所有请求完成后再执行下一步操作。另外，也可以使用axios的interceptors来拦截请求和响应，以确保它们按照正确的顺序执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圆周率呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值