Vuejs 记录踩坑：await 不能在foreach里面使用

最新推荐文章于 2025-03-21 12:00:00 发布
最新推荐文章于 2025-03-21 12:00:00 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： vue await 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guyang1995/article/details/104425087
版权

记录踩坑

这篇文章详细讲解了为什么await 不能在foreach里面使用，以及使用方法。

参考

https://juejin.im/post/5cb5a669e51d456e845b41f6

 

简单结论：

如果想使用await ，最好搭配 for 。

而forEach是一个的回调函数，也就是说这些回调函数会立即执行。

foreach里面需要搭配其他使用方法。

 

[Flutter] 填坑：await、forEach、Image.file三者结合的奇妙巨坑
梅花寺
02-23 801
问题是这样出现的，一个实时聊天app，在性能较差的手机上，一次性发送多张图片，Image.file组件加载居然有明显的延迟！ 具体表现为先出现一个空白区域，然后图片才会在空白区域慢慢渲染出来 而且我寻遍百度谷歌都没有人遇到相同的问题，难道这个bug只有我遇到了？ 首先来看下面两段代码： 分别在forEach循环和for循环中执行await会有什么区别呢？ 代码1(forEach)： import 'dart:async'; import 'dart:io'; void main() async { C
关于在foreach中使用await 或者其他异步问题处理
小陈的博客
09-16 1690
前几天在项目中有遇到一种情况，就是后台返回的一个树形结构的分类数的数据给到前端我这边，不过有需要调两个接口，一个接口是获取标签的tab,可以看成是一级的分类，一个接口就是用来获取所有的子集，因为业务所致，所以后台这样返回了，那前端这边很好解决吧，也就一个foreach循环，在请求一下就行了，因为我们这个项目是vue3 + ts，且这个分类有可能被后面需要用到，那行吧，写成一分类的hooks吧，要用到时候，就import一下就行了，既然想好，那开干吧。
重学 JS：为啥 await 不能用在 forEach 中详解
12-12
这是重学 JS 系列的第三篇文章，写这个系列的初衷也是为了夯实自己的 JS 基础或者了解一些之前不知道的东西。既然是重学，肯定不会从零开始介绍一个知识点，如有遇到不会的内容请自行查找资料。 不知道你有没有写过类似的代码，反正以前我是写过 function test() { let arr = [3, 2, 1] arr.forEach(async item => { const res = await fetch(item) console.log(res) }) console.log('end') } function fetch(x) { return new Pro
重学 JS：为啥 await 不能用在 forEach 中
yck199的博客
04-15 503
点击上方“前端真好玩”，喜欢他就关注他听说，看恺哥的文章会上瘾这是重学JS系列的第三篇文章，写这个系列的初衷也是为了夯实自己的JS基础或者了解一些之前不知道的东西。既然是重学，肯...
Vue.js 与 RESTful API 集成之使用 async/await 处理异步请求
轻口味的专栏
03-21 1372
Vue.js 是一款渐进式 JavaScript 框架，用于构建用户界面。它通过声明式渲染和组件化开发，帮助开发者高效管理数据和 UI 同步。RESTful API 基于 HTTP 协议，使用标准方法（如 GET、POST、PUT、DELETE）操作资源。每个资源有唯一 URI，客户端通过 HTTP 请求获取或修改资源状态。Axios 是基于 promise 的 HTTP 库，适用于浏览器和 Node.js。它支持多种 HTTP 请求，可拦截请求和响应，自动转换 JSON 数据。
在forEach使用async/await无效
dada914的博客
12-01 9421
最近老踩坑，在forEach里面，使用async和await不起效果，然后百度后发现原因，所以记录一下。先举个栗子： <script> let arr = [1, 2, 3]; let newArr = [11, 22] function RunFn() { newArr.forEach(async it => { let text = await proRun(); console.log(it); .
ForEach不支持async/await？怎么处理？
weixin_42274805的博客
03-18 1305
一、问题场景 function showData(data) { // data是个数组 里面的值需要转换后再进行展示 data.forEach(async t => {const a = await myformatter(t); console.log(a)} ); console.log('全部转换完毕') } const myformatter = (t)=> new Promise(reslove=> {
forEach遍历await异步函数，不能同步拿到数据。踩坑记录！！！！！
柑橘乌云_
03-16 1147
一直困惑我好久的一个难题：由于项目需求，我需要在循环中调用一个await 异步函数（调接口），我起初用的forEach，我的诉求是所有循环汇总的await异步函数都执行完毕，拿到所有await返回的数据，但是循环之后我拿不到所有await返回的数据。解决办法： 弃用forEach改用for循环，下面就可以同步拿到数据，只要你for循环里面代码块的代码是同步代码，那么每一次的for循环就会同步执行，直到for循环的所有遍历次数执行完毕，才会执行for循环之后的代码。
Dart：在循环中使用 Async 和 Await
坚果的博客
04-21 1579
Dart：在循环中使用 Async 和 Await 在 Dart（以及 Flutter）中，您可以使用Future.forEach在循环中顺序执行同步操作。下面的示例程序将打印从 1 到 10 的数字。每次打印完一个数字，它会等待 3 秒，然后再打印下一个数字。 //大前端之旅 void main() async { final items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; await Future.forEach(items, (item) async {
为什么不建议 forEach 内部使用 async/await？
JUZHIPI的博客
02-02 584
不知道大家有没有运行多个异步函数并将结果传入到一个数组，最后结果却发现数组是空的经历？就像上面的代码示例那样。那么数组为什么是空的呢？！在运行其他代码之前一直等待异步函数完成似乎是一项不可能的任务。这是因为你没有使用工具。当你学会了如何将和.map组合起来使用时，你会意识到这个任务比你想象的要容易。当你需要对数组中的每个元素运行异步操作时，你可能会自然而然地使用.forEach()方法。例如，有一个用户ID数组，你希望获取用户并将用户名推送到数组。最后记录用户名，但遗憾的是，数组为空。
await不能用在forEach中？
sanlyshi's front-end road
10-27 2869
不知道你是否写过类似的代码: functiontest(){ letarr=[3,2,1] arr.forEach(asyncitem=>{ constres=awaitfetch(item) console.log(res) }) console.log('end') } ...
vue for 循环中使用 await
热门推荐
钢铁之家
07-02 1万+
for循环使用async和await
map/forEach循环里async、await为什么会失效
qq_51075439的博客
12-28 3562
第一次在forEach循环里写请求用了async和await后，发现请求并没有同步执行（也就是async和await没有生效），真的是百思不得其解，下面就说一下为什么会这样和解决方法。工作中遇到的小问题，有什么不对的地方还请给与评价。
forEach异步问题，关于forEach循环外部无法访问到循环内部的值的问题
Zhou_siyue的博客
04-15 2711
解决forEach异步问题
为什么 await 在 forEach 中不生效？如何解决？
m0_59529616的博客
07-20 1443
lodash的forEach和[].forEach不支持await, forEach 只支持同步代码。 解决方法1：使用 for...of 解决方法2：使用 for循环 解决方法3：让orEach支持async await forEach 在正常情况像下面这么写肯定是做不到同步的，程序不会等一个循环中的异步完成再进行下一个循环。原因很明显，在上面的模拟中，while 循环只是简单执行了 callback，所以尽管 callback 内使用了 await ，也只是影响到 callback 内部。 ar.
【JavaScript】forEach中无法使用await/async
纠缠AI的亮子
02-25 1915
forEach循环会产生多个同步调用，就算你在forEach中使用了await，forEach也不会等待调用结束，forEach之后的语句会立即执行。 因此，如果你要在循环中使用 await，还是得使用for … of 结构，例如： async function printFiles () { const files = await getFilePaths(); for (const file of files) { const contents = await fs.readFile(
为啥 await 不能用在 forEach 中
weixin_34168880的博客
04-17 1260
不知道你是否写过类似的代码: function test() { let arr = [3, 2, 1] arr.forEach(async item => { const res = await fetch(item) console.log(res) }) console.log('end') } ...
await在forEach不起作用解决
Mr.Lee
08-26 1万+
一、前言 前两天在项目中用for遍历的时候遇到了一个坑，花了一天的时间解决。这里就记一下。 二、问题 首先引一个很简单题目:给一个数组,每隔1s打印出来.这里我把我一开始在项目中的代码贴出来.(当然这里完全和业务无关的) const _ = require('lodash'); const echo = async (i) =&gt; { setTimeout(() =&...
vue forEach 使用 async/await
andyzyqandyzyq的博客
06-22 1964
var arr = [1,2,3,4,5,] arr.forEach( async (item)=>{ await this.test(item) }) async test(item){ var res = await self.axios.post("https://www.baidu.com/",{id:item.id}) console.log(res) }
在foreach里面的接口处写await报错
最新发布
04-03
在 JavaScript 中，`forEach` 并不是一个适合直接结合 `async/await` 使用的工具，因为它的设计并没有考虑到对异步操作的支持。当你尝试在一个 `forEach` 回调函数里加上 `await` 时，可能会遇到一些奇怪的行为甚至抛出错误。这是因为虽然你在回调函数前面加了 `async` 关键字将其变成了异步函数，但是 `forEach` 自身并不会等待这些异步任务结束。 ### 错误原因 当我们在 `forEach` 内部使用 `await` 的时候，实际上只是让该迭代步骤内的代码暂停执行，而整个 `forEach` 方法本身仍然是立即返回并且不会阻塞接下来的代码。 例如下面这个例子： ```javascript const dataArray = [1, 2, 3]; dataArray.forEach(async (item) => { await someAsyncFunction(item); // 即使这里用了await，外部也不会等它完成 }); console.log('This will run before all async calls are done.'); ``` 尽管我们有 `await`，但由于 `forEach` 不会真正等待那些 promise 全部 resolve，所以最终会出现未预期的结果——即“没等到”所有异步调用都完成了便继续往下执行程序流。 --- ### 正确做法 为了更有效地控制异步流程并确保按照期望顺序运行每一项任务，我们可以选择其他替代方案如简单的for-of循环或是Promise-based的方法: #### 方案一：改用普通 `for...of` 循环代替 `forEach` 这是最简单也是推荐的方式之一。与 `forEach` 相比，标准的 `for...of` 可完美配合 `async/await` 实现逐个串行执行的效果。 ```javascript const items = [/* your array */]; for(const item of items){ try{ const result = await fetchSomethingRelatedToItem(item); processResult(result); } catch(error){ handleError(error,item); } } // 下一步代码将在此处准确无误地被执行，前提是上述每轮均已完成 performNextStepAfterAllProcessed(); ``` 这样就能保证每个请求都被依次发出，并且直到上一个成功后再进入下一个阶段。 #### 方案二：利用 `Promise.all` 或者 `Promise.allSettled` 实现并行处理 如果我们不在乎各次 API 调用之间是否保持一定的先后顺序的话，也可以借助 ES6 提供的新特性 —— Promises 批量提交请求后同时收集其反馈信息： ```javascript let requestsPromises = myArray.map(x => doApiCallForX(x)); Promise.all(requestsPromises) .then(responses =>{ responses.forEach(resp => handleResponse(resp)); }).catch(err => globalErrorHandler(err)) .finally(() => notifyUserThatEverythingIsDone()); ``` 这种方法允许我们几乎瞬间启动所有的远程连接（受限于浏览器的最大并发限制），然后一旦全部得到回应就会立刻采取行动。 --- ### 总结 尽量避免把 `async/await` 放进非原生支持异步入口点(像普通的 `.map()`,`.filter()`,以及本题提到的 `.forEach()`)之中；而是应当寻找合适的结构来适配我们的实际应用场景需求。比如对于需要维持清晰有序性的场合来说，传统的显式声明型循环就是理想之选；而对于追求高效快速完成多项独立作业的情形下，则应优先考虑采用基于承诺链表的设计思路。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值