【内推字节】欢迎简历chengxinsong@bytedance.com

async/await在for循环里运行结果怎么样?

一、前言

简单的async/await使用,将异步改成同步,如果在循环中使用async会怎么样?


二、需求

需求是这样的:异步获取数组这种的数组中元素

我们首先写一个:

var nums = [0,1,2,3,4,5];
var getNumByIndex = index => {
    return new Promise(resolve => {
       setTimeout(() => resolve(nums[index]), 1000);
    })
}


二、在for循环中await

async function forAwait(){
    console.log('循环开始');
    for(let i = 0;i<nums.length;i++){
       var value = await getNumByIndex(i);
       console.log(value);
    }
    console.log('循环结束');
}

执行结果:

循环开始
0
1
2
3
4
5
循环结束

可以看出for循环中,await是串行的。

发现for of,for in, while这些循环中是相同的。


四、在forEach里使用await

async function forEachAwait(){
    console.log('循环开始')
    nums.forEach(async num => {
        const value = await getNumByIndex(num);
        console.log(value)
    });
    console.log('循环结束')
}

输出:

循环开始
循环结束
0
1
2
3
4
5

为啥forEach的不能异步变同步呢?主要是:forEach是直接调用回调函数,for of等其他的是通过迭代器方式去遍历。


五、在map中使用await

我们先用 map 来运行上面的例子。

async function mapAwait(){
    console.log('循环开始');
    var numPromises = nums.map(async num => {
        var value = await getNumByIndex(num);
        console.log(value);
        return value;
    });
    var result = await Promise.all(numPromises);
    console.log('循环结束');
}

结果:

循环已经开始了
0
1
2
3
4
5
循环已经结束了

在map中使用await,会返回一个promises数组,因为async函数总会返回一个promise,我们需要拿到异步函数的值就需要await Promise.all()。


六、总结

如果你希望串行执行异步,你最好使用for循环之类的循环,如果你想拿到所有的异步值,使用map也是可以的,通过Promise.all()方法,如果不关心返回的结果,使用forEach也是可以的。



感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/823.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

微信群
欢迎加入微信群
微信公众号
欢迎关注微信公众号

图文推荐

微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!
您正在使用的浏览器是,不在支持范围内!
为了您的正常使用与展示,推荐使用Chrome浏览器68以上版本
支持浏览器:
火狐浏览器最新版
Safari浏览器最新版
Edge浏览器最新版
IE浏览器10,11