循环中使用async/await

最新推荐文章于 2024-08-16 11:09:20 发布
最新推荐文章于 2024-08-16 11:09:20 发布
阅读量3.7k 收藏 2
点赞数 1
分类专栏： 后端二三事 文章标签： javascript 前端 typescript async/await
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Long861774/article/details/125358474
版权
博客讨论了在JavaScript中处理嵌套循环时遇到的异步问题，以及如何通过Promise.all和for循环中的async/await解决。通过示例展示了如何正确地并行处理数组中的任务，避免错误的输出顺序，从而实现预期的数组操作。解决方案包括使用Promise.all对二次循环中的任务进行批量处理，以及在for循环中直接使用async/await来控制流程。
摘要由CSDN通过智能技术生成

此需求在于二次循环中需要使用async/await,按照每次嵌套循环的时候,进行async,则会给出错误的输出,如下所示

let list = [
    {
        name: "a",
        age: 1
    },
    {
        name: "b",
        age: 2
    }, {
        name: "c",
        age: 3
    }
];
let list2 = [
    {
        name: "a1",
        age: 1
    },
    {
        name: "b1",
        age: 2
    }, {
        name: "c1",
        age: 3
    }
];

function test() {
    list.forEach(async item => {
        let arr = [];
        await list2.forEach(async item => {
            let info2 = await asyncItem2(item);
            console.log("info2", info2)
            arr.push(info2)
        })
        console.log("--------arr", arr)
        let info = await asyncItem(item);
        console.log("test", info)

    })
}


async function asyncItem(item) {
    item.index = item.age;
    console.log("asyncItem", item.age)
    return Promise.resolve(item);
}


async function asyncItem2(item) {
    item.index = item.age;
    console.log("asyncItem2", item.age)
    return Promise.resolve(item);
}

//执行函数
test()

//以上,你将得到如下输出
asyncItem2 1
asyncItem2 2
asyncItem2 3
asyncItem2 1
asyncItem2 2
asyncItem2 3
asyncItem2 1
asyncItem2 2
asyncItem2 3
--------arr []
asyncItem { name: 'a', age: 1 }
--------arr []
asyncItem { name: 'b', age: 2 }
--------arr []
asyncItem { name: 'c', age: 3 }
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
test { name: 'a', age: 1 }
test { name: 'b', age: 2 }
test { name: 'c', age: 3 }

上述的67、69、71行很明显不是我们想要的输出,我们想要的是输出一个新的数组

解决方案:

1.利用Promise.all

可以将二次循环中的async封装成promise函数,同时利用Promise.all进行统一执行;

let list = [
    {
        name: "a",
        age: 1
    },
    {
        name: "b",
        age: 2
    }, {
        name: "c",
        age: 3
    }
];
let list2 = [
    {
        name: "a1",
        age: 1
    },
    {
        name: "b1",
        age: 2
    }, {
        name: "c1",
        age: 3
    }
];

function test(){
    list.forEach(async item=>{
        let arr = await promiseAllList();
        console.log("---arr",arr)
        let info = await asyncItem(arr);
        console.log("test",info)

    })
}


async function promiseAllList() {
    let arr = [];
    list2.forEach(item => {
        let info2 = promiseItem(item);
        arr.push(info2)
    })
    console.log("-----promiseAllList", arr)
    let result = await Promise.all(arr);
    console.log("result", result)
    return result;
}

async function promiseItem(item) {
    let info2 = await asyncItem2(item);
    console.log("info2", info2)
    return Promise.resolve(info2);
}

async function asyncItem(item) {
    console.log("asyncItem", item)
    return Promise.resolve(item);
}


async function asyncItem2(item) {
    item.index = item.age;
    console.log("asyncItem2", item.age)
    return Promise.resolve(item);
}

//执行函数
test()


//函数输出如下
asyncItem2 1
asyncItem2 2
asyncItem2 3
-----promiseAllList [ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]
asyncItem2 1
asyncItem2 2
asyncItem2 3
-----promiseAllList [ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]
asyncItem2 1
asyncItem2 2
asyncItem2 3
-----promiseAllList [ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
result [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]
result [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]
result [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]
---arr [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]
asyncItem [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]
---arr [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]
asyncItem [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]
---arr [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]
asyncItem [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]
test [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]
test [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]
test [
  { name: 'a1', age: 1, index: 1 },
  { name: 'b1', age: 2, index: 2 },
  { name: 'c1', age: 3, index: 3 }
]

2.for循环中调用async/await

function getData(n){
    return  new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(n+1)//原来的数据上+1
        },1000)
    })
}

let data = [0,1,2,3,4];

async function subData(){//提交数据保存
    for(let i = 0;i<data.length;i++){
        const res = await getData(data[i])
        console.log(res)
    } //改变数据

    console.log('sub')//提交数据
}

subData()

// 1
// 2
// 3
// 4
// 5
// subData: 5.009s
// sub

3.递归函数

function getData(n){//通过该接口改变数据
    // console.log('n',n)
    return  new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(n+1)//原来的数据上+1
        },1000)
    })
}

let data = [0,1,2,3,4]

async function digui(index,arr){
    if(index<data.length){
        let res = await getData(data[index])
        console.log(res)
        arr.push(res)
        await digui(index+1,arr)
    }

    return arr
}

async function subData1(){
    const newList = await digui(0,[])
    // console.log(newList)
    console.timeEnd("subData1")
    console.log('sub')
}

subData1()
console.time("subData1")

//1
// 2
// 3
// 4
// 5
// subData1: 5.010s
// sub

4.Promise.map

这个方法将使用一些插件依赖
bluebird
https://www.npmjs.com/package/bluebird

例子

function getData(n){
    return  new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(n+1)//原来的数据上+1
        },1000)
    })
}

let data = [0,1,2,3,4];



async function subData2(){
    await Bluebird.map(data,async item => {
         let res = await getData(item);
         console.log(res)
        return null;
    }, {concurrency: 10})
    console.timeEnd("subData1")
    console.log('sub')
}

subData2()
console.time("subData1")


// 1
// 2
// 3
// 4
// 5
// subData1: 1.016s
// sub

�

乾复道
关注
专栏目录
Python从使用线程到使用async/await的深入讲解
09-20
在本文中，我们将深入探讨从使用线程到使用`async/await`的转变，以及它们各自的特点和优势。 首先，让我们回顾一下线程。线程是并行执行任务的一种方式，它允许多个任务在同一时间片中并发运行。在Python中，可以...
Js中async/await的执行顺序详解
12-11
`async`函数返回一个Promise，而`await`关键字使得我们可以在异步代码中使用同步风格的写法，等待Promise的结果，而不会阻塞主线程。这种机制结合了Promise和微任务的概念，让异步流程控制变得更加简洁。理解`async/...
await async for循环中的使用
Tomoe20的博客
01-25 2660
有一需求需要给数组中每一项赋值，我这么写的 async mounted() { let list = await this.setArr(); console.log(list, 'list') }, methods: { setArr() { let arr = [{id: 1, groupList: []}, {b:1, groupList: []}]; arr.forEach(async item => { it
for 循环里的 await
m0_51056513的博客
10-02 4829
从callback到promise再到。之后的 JS 开始允许我们以一种看似顺序执行的方式书写代码，这让入门 JS 变得更简单，但在一些复杂的场景里比如 for-loop 环境里，还是会有不少坑的。
科普文：Java基础系列之【@Async注解遇上循环依赖的坑】
最新发布
为无为，事无事，味无味。
08-16 648
看到BeanCurrentlyInCreationException这个异常，我的第一反应是出现了循环依赖的问题。但是仔细一想，Spring不是已经解决了循环依赖的问题么，怎么还报这个错。于是，我就询问小姐姐改了什么东西，她说在方法上加了@Async注解。这里我模拟一下当时的代码，AService 和 BService 相互引用，AService的 save() 方法加了 @Async 注解。
JS循环中使用async、await的正确姿势
不定时分享最优质的网络技术与教程，满满的干货。
12-15 2338
时，希望JavaScript暂停执行，直到等待 promise 返回处理结果。不支持 promise 感知，也支持。总是真的，所以所有选项都通过了过滤。循环中异步代码完全跑完之后再执行。循环等待异步结果返回之前就执行了。数组，这是因为异步函数总是返回。需要在函数中使用，因此需要在。循环中有异步代码，是可以等到。但是他不能处理回调的循环，如。JavaScript 中的。的返回结果，可以使用。
递归以及for循环里async 和 await 的用法
纸飞机博客
01-18 5726
我宁愿你骂我，也不愿意你难过，你难过我会更担心。 递归？ 一般便是会问以下几点 1.什么是递归 广义上：程序调用自身的编程技巧称为递归（ recursion），他是个算法。 有几个要素：递归需要有边界条件、递归前进段、递归返回段。 2.递归能够解决什么问题 阶乘（面试常问），菲波拉锲数（面试常问）、等 阶乘的公式是： n! = 1 * 2 * 3 * 4 * ... * (n-2) * (n-1) * n 3.怎么实现一个递归 //例如：计算5的阶乘 function jie(n){ i.
async await与for
qq_43505774的博客
09-28 261
在JS循环中使用async/await的方法
12-12
目前，async / await这个特性已经是stage 3的建议，可以看看TC39的进度，本篇文章将分享在JS循环中使用async/await的方法. 在开发maty.js时，遇到一个数组任务，数组项是内部异步执行的函数，期望是同步依次执行每项...
【踩坑日记】async遇上循环
今天兔兔写代码了嘛？
05-09 202
【踩坑日记】async遇上循环原代码修改代码 原代码 async function pic(){ var date = await sumDate();//获取自今日起前30日的时间戳 await Promise.all(date.map(async(d)=>{ var SysNum = await countSysUserNum(d);//获取该日系统有效人数 var UseNum = await countUserUse(d);//获取该日使
vue 如何在 for 循环里面使用异步调用 async/await
TTong_190502的博客
08-15 1735
vue项目中如何在 for/forEach/map循环里面使用异步调用 async/await，在forEach直接调用会报错
for循环里的await
qq_40126542的博客
04-16 3363
小编推荐：Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。 最近在面试的时候问了一个比较偏的问题，发现几乎没有人回答上来。 async await 可以放在 for 循环里吗？for 循环和 Array 的 forEach 里的 async await 有没有什么区别...
异步编程 101：asyncio中的 for 循环
weixin_40917751的博客
05-09 236
前面写的异步编程的几篇文章：异步编程 101: 是什么、小试Python asyncio异步编程 101：Python async await发展简史异步编程 101：写...
使用async/await与forEach循环结合
m0_62946064的博客
10-30 122
内容来自 DOC在forEach循环中使用是否有问题？我试图遍历一个文件数组，并对每个文件的内容使用await。这段代码确实可以工作，但这样使用是否有问题呢？我听有人说，像这样的高级函数中不应该使用，所以我只是想知道是否有问题。当然，这段代码确实可以工作，但我确信它并没有按照你的期望来执行。它只是触发了多个异步调用，但在那之后printFiles函数会立即返回。
Python 中的异步 for 循环
迹忆客
05-30 1890
在最后一行，使用我们的循环，我们调用了 run_until_complete 函数来开始异步运行我们的主函数。在 main 函数中，我们调用了 gather 函数并传递了我们的异步函数，以便它们可以并行运行。异步函数有助于与同一程序的其他函数并行运行繁重的任务（如批处理程序，也许我们对在后台运行进程感兴趣）。1 和 2 由我们的异步函数返回，并按照我们在 gather 函数中编写这些函数的顺序排列。从技术上讲，同步函数会阻塞主函数的控制，而异步函数的执行不会阻塞主函数。同样，我们想从主函数调用异步函数。
JS 循环中使用await
【爱打盹的喵】的专栏
06-25 1301
程序中，有时候需要在循环中按照顺序进行数据操作，但是又有异步的动作，所以就希望用await。for、for of、for await of是生效的，forEach的await是不生效的；for、for of是await这一行代码在等待，for await of是整个for在等待；，我写这篇只是为了记录结论。2. 验证过程请参考原文。，我这里只展示验证结果。前言：整篇文章参考原文。
for循环中使用async/await
anjing6851的博客
03-01 2163
async function printFiles () { const files = await getFilePaths(); await Promise.all(files.map(async (file) => { //耗时操作 const contents = await fs.readFile(file, 'utf8') ...
async 异步循环
avsys_z的博客
08-10 826
async 异步循环 let async = require('async'); let arr = [ {id: 1, age: 2}, {id: 2, age: 3}, {id: 3, age: 4} ]; function print(obj, cb) { if(obj.id === 2) { cb("it's a err") }else { console.log("print ->" + obj.id); cb(null) } } .
for循环中调用接口 async await Promise
Ya_Taylor的博客
04-22 4048
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言1.for循环2.异步接口总结 前言 for循环中 循环调用接口 然后等循环结束获取全部数据。 1.for循环 代码如下（示例）： async initMapInfoWindowChart(data) { const { data: res, code: code } = await getData({ id: data.id, }) if (code == 200) {
Vue中使用async/await处理异步请求
"在Vue开发中使用async/await处理异步操作" 在现代JavaScript中，async/await语法已经成为处理异步操作的一种优雅方式，尤其是在Vue这样的前端框架中。这个技术结合了Promise的优点，使得异步代码更加易于理解和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

乾复道

与君共勉

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

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

打赏作者

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

抵扣说明：

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

余额充值