在vue中使用for循环有异步请求，每次都只获取到最后一个数据解决办法

最新推荐文章于 2023-08-23 17:10:41 发布
最新推荐文章于 2023-08-23 17:10:41 发布
阅读量5.1k 收藏
点赞数
文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdada_26/article/details/116506179
版权
  1. 我预想是将标签数组（dynamicTags）使用for循环取出每个值，在遍历标签数组将值一一添加到数据库中，奈何for循环结束了，才去执行put请求，这就导致了只添了数组的最后一个值
  2. 原因是axios.put请求是异步请求，
  3. 解决方案，使用递归如下面代码所示，
    tag是一个数组用来存，标签
    dynamicTags是在页面中获取的标签名列表
  putTagItem(tag,articleId){
        var _this=this;
        
        if (tag<=0) {
          
        }else{
           _this.tag.articleId=articleId;
           _this.tag.tagName=_this.dynamicTags[tag-1];
            _this.$axios.put("http://localhost:8088/tags/addTag",_this.tag)
            .then(function (resp) {
             tag--;
             _this.putTagItem(tag,articleId) ;   
             });
        }
      }
cdada_26
关注
快速点击，多次请求同一接口，怎样让结果渲染为最后一次请求的结果
weixin_41798613的博客
06-24 3913
如果多次点击请求同一接口，因为请求是异步的，可能会导致结果最后渲染为上一次搜索的结果，那么如何避免这种情况呢？ 第一步：定义一个字段num data() { return { num: 0 }; } 第二步：请求接口事件里 this.num ++; let a = this.num; 然后在接口返回后判断num与a是否相等，若相等，说明是最后一次请求，则进行数据处理。 async getKeywordEmit(val, clear,platform){ this.n
解决vue v-for渲染的异步请求数据无法使用better-scroll插件滚动问题
cyj5201314的博客
02-08 1096
背景 使用better-scroll插件实例化滚动列表，但列表中的数据是异步请求，有时列表中数据还没有渲染完成，插件就已经实例化导致bug，解决问题的根源在于令dom全部渲染完成后再实例化插件 最简单的方法就是设置定时器，等待一定时间再实例化插件，但这种方法容易浪费时间等待或者等待时间不足仍然导致bug 较好的解决方法就是watch+vm.nextTick nextTich: 在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM $nextTick 里面DOM.
for循环值都是得到循环最后一个
devil的博客
12-30 1424
tableData.push(JSON.parse(JSON.stringify(data)))
vue+element循环嵌套只能获取最后一项的值的问题解决
weixin_44227373的博客
11-19 2763
vue小白，前段时间用vue-cli加element plus遇到了一个有点离谱的bug，花了挺长时间找到了问题，记录一下。 问题 出问题的部分是一个v-for循环，循环内的内容是element ui中的card组件，card组件的内容从js部分的data中获取。点击card右上角的按键后会弹出一个dialog框，在dialog框中进行radio单选后回传单选的选项并将这一项删除。 由于是前后端分离开发，后端部分还没完善，因此只做了前端部分的调试，即da...
vue中使用cancelToken，解决多次调用相同接口，只用保留最后一次的结果
最新发布
qq_39285178的博客
08-23 1216
接口的响应时间不是固定的，比如我第一次点击，网络不好，接口5秒才返回数据，而我的第二次点击，网络很好，只需要2秒返回数据，那么实际上页面展示的数据可能是第一次调用返回的，就导致页面错乱。筛选面板的条件很多，用户可以频繁点击不同的筛选项，对用户不做任何防抖和节流的限制。以上两部分完成之后，用户可正常调用接口，在要重新调用接口的时候取消上一次调用。很多筛选维度和条件，用户每点一个筛选项，发起检索，页面展示数据。
多次请求只保持最后一次的结果
小瑾沐晚风的博客
10-19 5564
最近项目总结，如果一个输入框和一个搜索按钮，点击查询的时候，需要发起请求获取数据，因为请求是异步的，则无法获取哪一次的请求是最后一次的请求，则可以进行一下操作优化： 思路一：请求外部存在一个变量，记录每次请求的标记值；可以将外部的标记值传入调用请求的内部，因为函数有作用域的概念，所以暂时目前传入的数据是会一直存在于该作用域内部的，但是外部的标记值会一直变化，当是最后一次请求的时候，外部的值和内部接收的值是相同的，可以在此处进行数据处理。 vue代码如下： <template> &lt
解决for循环中只能点击到最后一个元素的问题
tiantiandashi的博客
07-06 3845
有时候我们需要对一排元素进行逐一选中，比如下面一个例子中，我们想要当点击一排按钮中的某一个时，利用下面的写法，都是只能弹出最后一个元素。 &lt;body&gt; &lt;button&gt;按钮1&lt;/button&gt; &lt;button&gt;按钮2&lt;/button&gt; &lt;button&gt;按钮3&lt;/button&gt; &lt;but
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
在上述代码中，我们创建了一个axios实例，并在请求拦截器中管理CancelToken，确保每次请求前都检查并取消相同URL的待处理请求。 总结来说，处理Vue中axios连续请求导致的返回数据混乱问题，可以采取与后端优化接口...
关于vue v-for循环解决img标签的src动态绑定问题
10-18
综上所述，通过这篇文章，我们可以了解到在Vue项目中使用v-for循环渲染图片列表时，需要注意图片资源的存放位置、正确的路径引用方式，以及Vue中动态绑定src属性的正确语法。这些知识点对于开发一个性能良好且维护性...
swiper在vue项目中loop循环轮播失效的解决方法
10-18
在Vue中，数据变化会引起视图更新，视图更新是一个异步过程。当更改数据后，Vue会开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会推入一次。然后，在这次事件循环的...
详解vue中多个有顺序要求的异步操作处理
10-16
这意味着在forEach循环中使用await并不会阻塞后续的循环，而是让每个循环迭代成为一个独立的Promise，这些Promise会在后台并发执行。 在给定的代码示例中，问题出在以下这段代码： ```javascript this.multiple...
v-for循环同一个自定义组件，只有最后一个有数据
ggi2003的专栏
07-13 2633
自定义组件中千万不要为省事，把 let that = null 定义到export default {外面，那样如果父组件通过v-for循环调用该子组件时，会出现数据污染问题
【转】解决for循环中只能点击到最后一个元素的问题
魂-淡
12-04 1377
有时候我们需要对一排元素进行逐一选中，比如下面一个例子中，我们想要当点击一排按钮中的某一个时，利用下面的写法，都是只能弹出最后一个元素。 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>...
vue3**使用v-for 循环时, 使用ref总会获取到的是最后的元素
u014773932的博客
02-09 1230
vue3 ref总是先获取最后的元素
前端同一个接口频繁调用，只处理最后一次返回
weixin_39646157的博客
02-02 1845
频繁调用同一个接口，参数不同，数据错乱
这是一篇ChatGPT写的博客：vue3&js坑——在循环中发起网络请求，返回结果只有最后一次网络请求的数据
月光晒了很凉快的博客
04-07 4478
在Vue3中，在循环中发起网络请求可能会导致一些不可预测的问题，例如数据不正确或者代码运行异常。为了避免这个问题，我们可以使用for...of循环或者方法来确保每个异步操作都能依次执行，并且等待所有异步操作完成后再进行下一步操作。这样可以提高代码的正确性和健壮性，同时也有助于提高代码的性能和效率。这篇文章到这里就结束了，不得不说 ChatGPT 的语言表达能力太强了，描述问题清晰而准确，相比之下，我写的仅仅能称之为笔记，而不是博客。
js中for循环总是取最后一个值的几种解决办法
热门推荐
大大大鸡腿的博客
08-05 1万+
<ul id="myul"> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var u=document.getElementById("myul"); var l=u.getElementsByTagName("li"); for(var i=0;
vue项目使用v-for渲染数据只渲染出最后一条
m0_72929120的博客
06-29 675
样式问题，应该给content-list去用flex,但是我直接用在了list-index那个盒子上，数据会平铺
vue forEach覆盖问题（输出最后一条数据）
山河野
12-17 1824
getTrainData().then(res => { const resData = res.content const tradinDataObj = {} const resListData = [] resData.forEach(element => { if (element) { tradinDataObj = element.id tradinDataObj = element.name resListData.push(tradinDataObj) } }) this.tr.
vue2使用循环发送多个请求，并把每次请求到的数据追加到data中的一个大数组中怎么实现
06-10
你可以使用 Promise.all 方法来处理多个异步请求。具体实现步骤如下： 1. 定义一个空数组，用于存储每次请求的数据。 2. 使用循环语句遍历需要发送的请求。 3. 在循环体内使用 axios 或 fetch 等工具发送请求，并将返回的 Promise 对象存储在一个数组中。 4. 使用 Promise.all 方法，等待所有请求都完成，并将返回的数据数组作为参数传入 Promise.all 方法。 5. 在 Promise.all 的回调函数中，将每次请求的数据追加到大数组中。 下面是一个示例代码： ```javascript // 定义一个空数组，用于存储每次请求的数据 let dataList = []; // 循环发送多个请求 for(let i=0; i<5; i++) { // 使用 axios 发送异步请求，并将返回的 Promise 对象存储在一个数组中 let promise = axios.get('http://example.com/api/data/' + i); dataListPromise.push(promise); } // 等待所有请求都完成，并将返回的数据数组作为参数传入 Promise.all 方法 Promise.all(dataListPromise).then((dataListArr) => { // 在 Promise.all 的回调函数中，将每次请求的数据追加到大数组中 dataListArr.forEach((data) => { dataList = dataList.concat(data); }); }); ``` 在以上代码中，我们使用了 axios 发送异步请求，并将返回的 Promise 对象存储在一个数组中。然后，我们使用 Promise.all 方法等待所有请求都完成，并将返回的数据数组作为参数传入 Promise.all 方法。最后，在 Promise.all 的回调函数中，我们将每次请求的数据追加到大数组中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值