背景:需要给对象数组的每一项添加某个属性,属性值来源于接口(即需要遍历数组,循环调用接口添加属性值)
实现方法
示例代码
// 原始数据 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 的异步遍历,你真的会写吗?