解决axios通过for循环向同一个接口发送请求后渲染出现的问题

最新推荐文章于 2023-11-16 15:43:21 发布
最新推荐文章于 2023-11-16 15:43:21 发布
阅读量979 收藏 2
点赞数 3
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MaNqo/article/details/116402627
版权

最近在做一个项目的过程中，发现用for循环渲染出来的列表会发生乱序的情况。

下图是在axios请求中打印出来的索引号。
在这里插入图片描述

在这里插入图片描述
思考了许久发现，是因为用for循环来发送axios请求时，for循环的发生时间是很短的，但是axios请求需要发生一段不确定的时间，存在先发送请求而慢结束的情况，而这就导致了渲染顺序的乱序情况。

解决方案

利用promise，then(异步变同步)的方式，通过递归将每一个请求的结果都push到一个数组里面，在把这个数组里面的数据取出来用。亲测有效，就是异步变同步的话速度相对会比较慢。
在这里插入图片描述

如果大佬有更好的方法还请多多指教orz

MaNqo
关注
专栏目录
vue for循环中使用axios无法正常获取数据
刘杨造梦的博客
02-22 1707
需求：有个数组，这个数组里存的是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",
for循环发送多个axios请求
weixin_43836360的博客
01-05 3042
for循环请求多个axios请求 文章目录for循环请求多个axios请求前言一、pandas是什么？总结 前言 近期在学习的时候遇到了一个问题，在循环发送axios请求后，我需要通过请求成功后的状态来进行判断是否需要进行下一步操作，但是发现axios是异步请求，所以我写在for循环后面的判断老是提前执行。在查看了官方文档后发现了axios.all和axios.spread，所以记录一下通过axios.all和axios.spread解决的问题 提示：以下是本篇文章正文内容，下面案例可供参考 一、pa
JavaScript：forEach循环中的Axios请求
甜鲸鱼的博客
10-27 1581
JavaScript：forEach循环中的Axios请求
for 循环中请求 axios 报错
逗比爱好者
11-28 370
for 循环中请求 axios 报错 axios 无法请求
【快应用】for循环数据不渲染指导案例
华为开发者联盟
12-09 427
容易出错的是第三种用法，需要特别注意与Vue不同，“for="(index,value) in list”的写法中，index需要放在第一位。3、"for="(index,value) in list"：index为元素索引，value为元素变量。2、"for="value in list"：value为自定义的元素变量，默认元素索引为$idx。1、"fn"：for="list"：list为数组对象，默认元素变量为$item。快应用中执行for指令进行循环渲染，数据不生效，如何处理？
for循环中调用axios获取数据
weixin_42413684的博客
02-09 3187
业务需求，需要从一个接口中获取到一组数据，根据数据中的id去调取另一个接口得到最终的数据。 直接在for循环中调用axios在循环外得不到接口的数据： getData() { let data = []; for (let i = 0; i < newArr.length; i++) { let json = { scheduleId: this.printForm.scheduleId,
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
然而，在某些情况下，尤其是当对同一个接口连续发起请求时，可能会遇到返回数据混乱的问题。这主要是由于网络延迟、请求并发控制等因素导致请求的顺序与预期不符，从而影响了前端的数据处理。本文将深入探讨这个问题...
使用for循环axios异步请求以及回调请求遇到的坑点
m0_46627254的博客
06-16 2706
现在正在做一个电商项目，我做的是一个分类页如图 这是已经做完的成品，先是请求两个接口，左边导航栏为一个接口，通过axions请求查询出来，之后拿到这个导航栏的ID查二级分类 也就是图上写到的女装这些， 本来如果正常情况数据是二级数据下面children里面会有三级分类 但是后端写的有点出入，让查询完二级后，再次发送请求通过二级的ID来查询三级分类,也就是上图里面图片商品，这个时候该怎么做呢，于是我想到了循环请求，先把数据循环出来放在一个数组里面遍历 this.$api.goodsClassify.getG
vue异步axios获取的数据渲染到页面的方法
10-18
这个方法可以确保在下一个DOM更新循环之后执行延迟回调，对于等待数据更新后的DOM操作非常有用。例如，我们可以在Axios请求成功后，调用$store.state.retData=res.data.retdata，然后在$nextTick()回调中更新数据，...
vuefor循环上传axios.请求，怎么同步
05-10
1. 定义一个方法，用于遍历数据并一次发送请求。每次请求返回一个Promise对象。 ``` uploadData(item) { return axios.post('http://www.example.com/upload', item); } ``` 2. 将循环的数据存放在一个数组中，...
循环中调用axios获取数据,实现同步异步操作
Hrenhua的博客
08-15 2521
最近在完成一个项目，每一次循环都需要使用axios去后台请求一次数据，然后渲染到页面。但是循环完成后，页面并没有正确地显示数据，究其原因，axios去获取数据是一个异步请求，但是，循环是不断执行的，每次循环axios获取数据还没有完成。数据并没有请求成功，而循环已经结束。因此，这样的方法是不能实现我们的目标。所以我们要将axios请求设为同步请求。参考以下这篇文章： for循环中的函数使用axios请求数据，拿不到数据？ 除了将axios设为同步请求外，我们还可以在数据请求完成之后再循环下一次，这时要用到a
For循环里面 实现 aixos排队请求数据
业余前端的职业经历
11-27 861
今天下午 碰见了一个问题 也是让我想了 一段时间 直接上代码 废话不多说 我用伪代码 模拟当时的场景 本人是用vue开发的 //arr 是一个数组 我要从arr数组里面获取 参数 id 然后发送ajax请求 等于说是 获取一个 发送一次请求 获取一个发送一次请求 然后把获取的数据 push到 vue 的data 对象里面 arr:' ' //这个再vue得 dat...
项目实训记录（十）——axios循环发送请求顺序执行
pinkray_c的博客
06-04 1897
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通信顺序问题 ......
将for循环axios操作的整体变为同步代码
HarryWg的博客
04-26 1139
JS将for循环axios操作整体变为同步代码
学习记录(day04-axios增删改查、v-for循环、页面加载成功处理函数)
庭前云落的博客
10-19 165
[TOC] 1.1 基本语法：插值表达式 <template> <div> {{username}} <br/>...
vue axios连续访问同一个接口不同参数请求数据混乱
Aa_duidui的博客
09-13 2405
vue axios连续访问同一个接口不同参数请求数据混乱
vue中axios异步调用接口的坑
公众号-测试生财
12-11 1459
背景 最近在写vue项目的时候遇到一个axios调用接口的坑，有个前端模块涉及axios去调用多个接口，然后请求完获取数据之后，再使用windows.location.href重定向到新页面，这时候却发现axios请求的接口都是出于canceled的状态。 例如： axios.get('/url1') .then(function (response) { console.log(response); }) .catch(function (error) { consol
在循环遍历中，调用axios，实现同步
Qxn530的博客
03-22 759
在循环遍历中，调用axios，实现同步
for循环与异步请求的问题
最新发布
A5120184120的博客
11-16 211
参考
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值