vue在for循环中嵌套调用同步方法 async await不生效时的解决办法

原创 已于 2024-10-08 10:35:53 修改 · 313 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue #前端

于 2021-08-28 16:39:39 首次发布
在Vue项目开发中遇到for循环内多次调用async方法导致异步执行的问题。解决方法是将do方法改为返回Promise，并确保在内部正确使用resolve。这样可以确保方法按顺序同步执行。对于初学者来说，这是一个重要的异步控制技巧。

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

vue在for循环中嵌套调用同步方法 async await不生效时的解决办法

在项目中遇到

我需要在一个for循环中多次同步调用一个方法，但是单纯的使用async await不生效

this.do
this.do方法还是异步请求
解决方法
在do方法里面return 一个promise

在这里插入图片描述

PS:记得写resolve()

小白，如有错误欢迎指正。

MaydayYao
关注
vue2+elementUI：实现tree横向滚动问题，el-tree怎么设置树节点内容溢出的滚动条？Tree树组件设置横向和纵向滚动条多种解决方案与示例代码（解决横向滚动条不显示、设置无效没用问题）
高级前端工程师
06-22 2330
element-UI el-tree横向滚动条，el-tree 横向滚动条，elementui树组件Tree横向滚动条不出来，vue项目中el-tree ：横向和纵向滚动条设置，添加横向滚动条，elementUI - tree横向滚动问题，vue项目中el-tree 支持横向和纵向滚动条设置，element 树组件 tree 横向纵向滚动条，element-ui中使用el-tree横向滚动条不显示，不产生横向滚动条，css设置无效，滚动条不出来怎么办，解决Element-ui-Tree组件无法出现横向滚动条
2022_黑马vue笔记
qq_43420617的博客
03-23 2914
vue2 vue插件 1.Vue Snippets 2.Vetur vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！ 双向数据绑定： 在网页中，form 表单负责采集数据，Ajax 负责提交数据。 js 数据的变化，会被自动渲染到页面上 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中 MVVM 数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源
vue循环同步请求
weixin_72329752的博客
11-27 598
在vue中循环同步请求可以通过使用async/await.结合for循环来实现。
Vue 3 中 async/await 不起作用的常见错误及解决方案
GDBBader的博客
10-21 1216
然而，如果不正确使用，可能会导致一些不易察觉的错误。本文将探讨一些常见的错误例子，并提供相应的解决方案。通过避免上述错误，我们可以确保我们的异步代码既高效又健壮。是建立在 Promise 之上的，因此确保你的异步操作返回 Promise，并且在必要时使用。在这个例子中，如果在处理数据时发生错误，这个错误不会被捕获，因为它没有被放在。提供的同步代码风格，同时避免常见的异步编程陷阱。来处理可能发生的错误。，这会创建一个不必要的 Promise 链。都是异步操作，但是它们没有被声明为。在这个例子中，尽管使用了。
vue中 async、await不生效问题排查
热门推荐
weixin_43837268的博客
10-26 1万+
1、async是否在await的最近的方法的外层 例： async mounted() { this.getSysTime(res => { itime = setInterval(async () => { // 注意这个async才能生效 await this.request(); }, 1000);
for循环中同步调用接口
Circle666的博客
03-08 803
for循环中调用方法时使用await，外面必须套一层async的方法，如果initdata()方法中有api请求，那么请把for循环单独提出去，写个方法即可；Elementui中的级联选择器应用，每级都是动态加载数据，级数不确定，多的有10级。当时我就是懒了一下，没有单独写，导致一直不成功，同步没有生效。
vue for 循环中使用 await
钢铁之家
07-02 1万+
for循环使用async和await
vue for循环
duzhe17629085113的博客
12-10 402
1.for和if放在了同一个标签中 没有先后顺序的要求,但是先执行for 渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染 这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染 ...
基于 Vue3打造前台+中台通用提效解决方案（上）
oschina_41559824的博客
03-04 4676
本项目使用 + 来实现前中台解决方案因为，之前的项目一直都是使用作为构建工具；出来这么久了，也没有用过；所以想在当前项目下进行使用；webpack vite 2.2、这么快会有什么问题吗？ 如果大家对的构建机制有了解的话，那么应该可以发现一个问题。 那就是**既然以原生的方式为浏览器提供源码，让浏览器接管了打包的部分工作**，那么假如我们的项目中存在 的内容怎么办?是不是就意味着无法解析呢? 是的! 在 的早期版本中，确实存在这个问题，这个问题导致的最核心的麻烦就是很多的依赖无法使用。 比如 因为
如何在vue的created周期中执行完毕多个await函数，并将多个await函数的结果拼接为最终结果，赋值给data中的变量，最后在mounted中使用
04-01
好的，用户的问题是关于在Vue.js的created生命周期钩子中使用async/await执行多个异步函数，合并结果到data变量，并在mounted中使用这个变量。我需要结合提供的引用内容来解答。 首先，用户提到在created中运行多个...
为什么dialog中的，打开的时候open方法不生效
最新发布
07-05
我们正在解决Vue中dialog组件open方法在打开时不生效的问题。根据引用[3]中提到的问题：使用v-if控制el-dialog时，open事件不生效。这是因为当使用v-if时，每次都会重新创建和销毁组件，导致之前的状态（包括事件...
VUE\JS处理在循环中异步和同步执行的问题
ew45218的博客
06-22 753
1、有一个组别集合，每一个小组别对象里面有一个数据集合，需要循环去校验每个不同组里的数据（不同组合因为一些特殊属性不能合并到一个组里），全都符合就通过验证，去处理后续业务。2、现在，在校验规则方法里对一个集合里的每一条数据进行强校验和弱校验，弱校验需要在提升框放入确定的操作按钮，允许通过，再循环到下一条数据的验证。循环调用校验方法，检验方法在弹出待确定按钮时，循环依旧在往下执行，没有等点击确定后再进行下一个循环，异步问题导致获取不到准确的校验结果。1、涉及到组别集合的循环、组别内部数据的循环，循环套循环。
vue.js中for循环实现异步方法同步执行
lemon今天学习了吗？的博客
07-01 8298
前言：在项目中有些逻辑或者请求依赖另一个异步请求，常用的方法是回调函数、async await 。场景：For循环中异步接口查询返回数据 知识点：async 是“异步”的简写，async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成，并且await 只能出现在 async 函数中，否则会报错。async作用：当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递
map/forEach循环里async、await为什么会失效
qq_51075439的博客
12-28 3661
第一次在forEach循环里写请求用了async和await后，发现请求并没有同步执行（也就是async和await没有生效），真的是百思不得其解，下面就说一下为什么会这样和解决方法。工作中遇到的小问题，有什么不对的地方还请给与评价。
22/09/27 vue3,在for循环中同步获取异步函数数据
Nighsloth的博客
09-27 1195
vue，promise实现同步获取多个异步数据
for循环一定要指定键么 vue_vue的for循环使用方法
weixin_39774491的博客
12-20 234
vue是一套当下非常受欢迎的构建用户界面的渐进式框架。那如何使用vue进行数据循环呢？下面的案例将使用v-for循环进行数据的遍历。1、打开html开发工具，新建一个html 代码页面。2、在新建的html代码页面创建一个标签同时给这个标签设置一个id为app，然后在里创建一个标签。代码：3、引入vue.js。在结束标签前面引入下载好的vue.js文件。4、创建vue实例。在引入的vue.js文件...
使用async/await并不会执行接下来的代码，原因及解决办法
changyana的博客
08-19 2840
get_table_header函数中创建了新的Promise，但是在处理get_table_header_setting(params)的响应时，并未调用resolve()或reject()，这使得返回的Promise永远处于pending状态，所以await this.get_table_header()也就永远不会返回，导致后续的代码无法执行。
for循环同步执行异步方法
m0_68930485的博客
01-17 1125
for 循环中执行异步方法，请求有时会被冲掉，得不到返回数据
【面试题】在JS循环中使用await会怎么样？
web全栈开发的博客
03-02 1299
这个问题是这样产生的？某天，在学习异步的知识遇到这样一道题：使用Promise的方式，每隔一秒输出数组中一个值​}, 1000);})})复制代码那这段代码还是挺好了解的，相当于}, 1000);})}, 1000);})}, 1000);})})复制代码看完之后，我就在想，如果我在循环中，每次输出值之后停止一秒，也可以解决，于是乎就有了以下代码​resolve()}, ms)})​i++) {复制代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值