JS 異步遍歷的實現(xiàn)方法
背景：需要給對象數(shù)組的每一項添加某個屬性，屬性值來源于接口（即需要遍歷數(shù)組，循環(huán)調(diào)用接口添加屬性值）
實現(xiàn)方法
示例代碼
// 原始數(shù)據(jù)
let list = [{ id: 1 }, { id: 2 }, { id: 3 }]
// 期望得到的數(shù)據(jù)[{ id: 1 }, { id: 2, asyncData: 'asyncData2' }, { id: 3, asyncData: 'asyncData3' }]
// 模擬接口調(diào)用
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)
}
執(zhí)行結(jié)果是
{ 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)
}
執(zhí)行結(jié)果是
{ id: 1 }, { id: 2 }, { id: 3 }]
結(jié)果是 map 遍歷也不行。我還試了 entries 遍歷，也是不行的。
類似于 map 等傳入一個回調(diào)函數(shù)作為參數(shù)的循環(huán)方式都無法處理異步
for 循環(huán)
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')
}
執(zhí)行結(jié)果是
{ id: 1 }, { id: 2 }, { id: 3 }]
for 循環(huán)好像不行？我們再試試 await 關(guān)鍵字
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')
}
執(zhí)行結(jié)果是
list [
{ id: 1 },
{ id: 2, asyncData: 'asyncData2' },
{ id: 3, asyncData: 'asyncData3' }
]
111:4.418ms
這樣寫是得到了我們的的期望的結(jié)果，但很明顯循環(huán)中的異步是串行執(zhí)行的，時間復雜度是 O(n)。
我們希望他可以并行執(zhí)行，并且還要保證所有的異步都執(zhí)行完畢才執(zhí)行下一步。并行執(zhí)行我們留到最后說。
for-of 循環(huán)
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')
}
執(zhí)行結(jié)果是
list [
{ id: 1 },
{ id: 2, asyncData: 'asyncData2' },
{ id: 3, asyncData: 'asyncData3' }
]
111:4.286ms
這種寫法與 for 循環(huán)一樣，異步也是串行執(zhí)行的。
我們再試試 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')
}
執(zhí)行結(jié)果是
{ id: 1 }, { id: 2 }, { id: 3 }]
與 for 循環(huán)一樣，使用 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')
}
執(zhí)行結(jié)果是
list [
{ id: 1 },
{ id: 2, asyncData: 'asyncData2' },
{ id: 3, asyncData: 'asyncData3' }
]
111:4.452ms
這種寫法異步也是串行執(zhí)行的。
我們再試試 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 中的弊端。但不影響它的異步還是串行執(zhí)行的。
Promise.all
最后終于可以來到并行執(zhí)行的環(huán)節(jié)了
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')
}
執(zhí)行結(jié)果是
list [
{ id: 1 },
{ id: 2, asyncData: 'asyncData2' },
{ id: 3, asyncData: 'asyncData3' }
]
111:5.073ms
好尷尬，執(zhí)行時間變長了 T_T。大家可能跟我有一樣的疑惑不是并行執(zhí)行的嗎，執(zhí)行時長更短才對呀?。?！
沒關(guān)系，其實是因為異步寫得很簡單，實際應(yīng)用中，比如發(fā)起網(wǎng)絡(luò)請求，請求的時長就會很長，就可以看出并行執(zhí)行的優(yōu)勢了。
這里我還是模擬一下異步函數(shù)執(zhí)行時間比較長的情況吧
// 這里我們更新一下job函數(shù)
function job(id) {
return new Promise(resolve => {
setTimeout(() => {
resolve(`asyncData${id}`)
}, id * 2000)
})
}
Promise.all 的執(zhí)行結(jié)果
list [
{ id: 1 },
{ id: 2, asyncData: 'asyncData2' },
{ id: 3, asyncData: 'asyncData3' }
]
111: 6.010s
而其他串行執(zhí)行的方法，執(zhí)行時長為
111: 10.016s
可以看出還是差了近一半。
TODO 但是這里有個問題 T_T，更新后的 job 函數(shù),for-await-of 用 then 的寫法失靈了，得不到我們期望了結(jié)果了，也是無解，期望大家來幫忙解答一下
附加內(nèi)容
既然 forEach 不支持異步遍歷，那我們自己來實現(xiàn)一個可以異步遍歷的 forEach 吧
// 并行實現(xiàn)
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)
}
// 串行實現(xiàn)
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()
執(zhí)行結(jié)果都是
list[({ id: 1 }, { id: 2, asyncData: 'asyncData2' }, { id: 3, asyncData: 'asyncData3' })]
參考
到此這篇關(guān)于JS 異步遍歷的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)JS 異步遍歷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家分享了9個實用的Javascript代碼高亮腳本，相信一定對大家的學習有所幫助，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了js如何將輸入的文字部分獲取拼音首字母問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)京東秒殺效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
js location.replace與location.reload的區(qū)別
js location.replace與location.reload的區(qū)別，經(jīng)常能用的到，需要的朋友可以可以下。2010-09-09
相信你老早就在騰訊或者新浪的微博上體驗到了，@符號在微博時代的便捷呼叫。2010-11-11
這篇文章主要為大家詳細介紹了前端微信支付js代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
networkInformation.downlink測用戶網(wǎng)速方法詳解
這篇文章主要為大家介紹了networkInformation.downlink測用戶網(wǎng)速方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
這篇文章主要介紹了js表單提交和submit提交的區(qū)別,結(jié)合實例形式較為詳細的分析了js表單提交和submit提交具體實現(xiàn)方法與使用技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了iscroll實現(xiàn)下拉刷新功能的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別
這篇文章主要介紹了JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08