JS 异步遍历的实现方法
背景：需要给对象数组的每一项添加某个属性，属性值来源于接口（即需要遍历数组，循环调用接口添加属性值）
实现方法
示例代码
// 原始数据
let list = [{ id: 1 }, { id: 2 }, { id: 3 }]
// 期望得到的数据[{ id: 1 }, { id: 2, asyncData: 'asyncData2' }, { id: 3, asyncData: 'asyncData3' }]
// 模拟接口调用
async function job(id) {
return `asyncData${id}`
}
forEach 遍历
这可能是很多前端最先想到的方法
function asycTraversal() {
list.forEach(async item => {
if (item.id != 1) {
item.asyncData = await job(item.id)
}
})
console.log(list)
}
执行结果是
{ id: 1 }, { id: 2 }, { id: 3 }]
因为 forEach 根本不支持异步写法
map 遍历
既然 forEach 不行，那我们再来试试 map 呢
function asycTraversal() {
list.map(async item => {
if (item.id != 1) {
return {
...item,
asyncData: await job(item.id),
}
} else {
return item
}
})
console.log(list)
}
执行结果是
{ id: 1 }, { id: 2 }, { id: 3 }]
结果是 map 遍历也不行。我还试了 entries 遍历，也是不行的。
类似于 map 等传入一个回调函数作为参数的循环方式都无法处理异步
for 循环
async function asycTraversal() {
console.time('111')
for (let i = 0; i < list.length; i++) {
job(list[i].id).then(res => {
list[i].id !== 1 && (list[i].asyncData = res)
})
}
console.log('list', list)
console.timeEnd('111')
}
执行结果是
{ id: 1 }, { id: 2 }, { id: 3 }]
for 循环好像不行？我们再试试 await 关键字
async function asycTraversal() {
console.time('111')
for (let i = 0; i < list.length; i++) {
list[i].id !== 1 && (list[i].asyncData = await job(list[i].id))
}
console.log('list', list)
console.timeEnd('111')
}
执行结果是
list [
{ id: 1 },
{ id: 2, asyncData: 'asyncData2' },
{ id: 3, asyncData: 'asyncData3' }
]
111:4.418ms
这样写是得到了我们的的期望的结果，但很明显循环中的异步是串行执行的，时间复杂度是 O(n)。
我们希望他可以并行执行，并且还要保证所有的异步都执行完毕才执行下一步。并行执行我们留到最后说。
for-of 循环
async function asycTraversal() {
console.time('111')
for (const item of list) {
item.id !== 1 && (item.asyncData = await job(item.id))
}
console.log('list', list)
console.timeEnd('111')
}
执行结果是
list [
{ id: 1 },
{ id: 2, asyncData: 'asyncData2' },
{ id: 3, asyncData: 'asyncData3' }
]
111:4.286ms
这种写法与 for 循环一样，异步也是串行执行的。
我们再试试 then 的写法
async function asycTraversal() {
console.time('111')
for (const item of list) {
job(item.id).then(res => {
item.id !== 1 && (item.asyncData = res)
})
}
console.log('list', list)
console.timeEnd('111')
}
执行结果是
{ id: 1 }, { id: 2 }, { id: 3 }]
与 for 循环一样，使用 then 方法也是不行的。虽然 await 是可以的，但是这有一个弊端，就是不能像在 then 方法里面做一些其他的操作。
for-await-of
async function asycTraversal() {
console.time('111')
for await (const item of list) {
item.id !== 1 && (item.asyncData = await job(item.id))
}
console.log('list', list)
console.timeEnd('111')
}
执行结果是
list [
{ id: 1 },
{ id: 2, asyncData: 'asyncData2' },
{ id: 3, asyncData: 'asyncData3' }
]
111:4.452ms
这种写法异步也是串行执行的。
我们再试试 then 的写法
async function asycTraversal() {
console.time('111')
for await (const item of list) {
job(item.id).then(res => {
item.id !== 1 && (item.asyncData = res)
})
}
console.log('list', list)
console.timeEnd('111')
}
哇哦，也是可以的，这样我们就解决了 for-of 中的弊端。但不影响它的异步还是串行执行的。
Promise.all
最后终于可以来到并行执行的环节了
async function asycTraversal() {
console.time('111')
const listPromises = list.map(item => {
return new Promise(async resolve => {
if (item.id == 1) {
resolve(item)
} else {
resolve({
...item,
asyncData: await job(item.id),
})
}
})
})
await Promise.all(listPromises).then(res => {
list = res
})
console.log('list', list)
console.timeEnd('111')
}
执行结果是
list [
{ id: 1 },
{ id: 2, asyncData: 'asyncData2' },
{ id: 3, asyncData: 'asyncData3' }
]
111:5.073ms
好尴尬，执行时间变长了 T_T。大家可能跟我有一样的疑惑不是并行执行的吗，执行时长更短才对呀！！！
没关系，其实是因为异步写得很简单，实际应用中，比如发起网络请求，请求的时长就会很长，就可以看出并行执行的优势了。
这里我还是模拟一下异步函数执行时间比较长的情况吧
// 这里我们更新一下job函数
function job(id) {
return new Promise(resolve => {
setTimeout(() => {
resolve(`asyncData${id}`)
}, id * 2000)
})
}
Promise.all 的执行结果
list [
{ id: 1 },
{ id: 2, asyncData: 'asyncData2' },
{ id: 3, asyncData: 'asyncData3' }
]
111: 6.010s
而其他串行执行的方法，执行时长为
111: 10.016s
可以看出还是差了近一半。
TODO 但是这里有个问题 T_T，更新后的 job 函数,for-await-of 用 then 的写法失灵了，得不到我们期望了结果了，也是无解，期望大家来帮忙解答一下
附加内容
既然 forEach 不支持异步遍历，那我们自己来实现一个可以异步遍历的 forEach 吧
// 并行实现
async function _forEach(arr, fn) {
const fns = []
for (let i = 0; i < arr.length; i++) {
const item = arr[i]
fns.push(fn(item, i, arr))
}
await Promise.all(fns)
}
// 串行实现
async function _forEach(arr, fn) {
for (let i = 0; i < arr.length; i++) {
const item = arr[i]
await fn(item, i, arr)
}
}
// 使用
async function asycTraversal() {
await _forEach(list, async item => {
item.id !== 1 && (item.asyncData = await job(item.id))
})
console.log('list', list)
}
asycTraversal()
执行结果都是
list[({ id: 1 }, { id: 2, asyncData: 'asyncData2' }, { id: 3, asyncData: 'asyncData3' })]
参考
到此这篇关于JS 异步遍历的实现方法的文章就介绍到这了,更多相关JS 异步遍历内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
xmlhttp是一种浏览器对象, 可用于模拟http的GET和POST请求,xmlhttp配合JavaScript可以实现页面数据在无刷新下的定时数据更新,如果应用在聊天室、文字直播上,可以取得较好的视觉效果,这篇文章主要介绍了JS——XMLHttpRequest 对象,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了Boostrap popover用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
我们接下来讨论元素的可见性，CSS有两种不同的方式可以有效的隐藏元素，它们有各自的特点，会导致不同的结果。2010-06-06
这篇文章主要介绍了JavaScript对数组进行随机重排的方法,实例分析了javascript实现数组随机重新排序的两种实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了js tab栏切换代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
firefox下input type="file"的size是多大
firefox对type="file" 的input的width定义目前是不支持的，但是FF支持size属性，可以给size设置一个值，来控制上传框的大小2011-10-10
JavaScript脚本文件都放在页面底部加载，可以有效地加快页面的加载速度，下面为大家介绍下书写时的注意事项2013-07-07
常用的页面效果有弹出层效果，无缝滚动效果，选项卡切换效果，接下来与大家分享一款自己用原生javascript写的选项卡切换效果在原有的基础上进行了扩展，加入了自动轮播，这样就变成了类似图片轮播的效果2013-03-03
Node.js是一套用来编写高性能网络服务器的JavaScript工具包，一系列的变化由此开始。比较独特的是，Node.js会假设你是在POSIX环境下运行它Linux 或 Mac OS X2012-03-03
这篇文章主要介绍了javascript实现获取cookie过期时间的变通方法,因为cookie过期时间是由浏览器控制的,所以想获取过期时间只能通过本文的变通方法来实现,需要的朋友可以参考下2014-08-08
最新评论