今天遇到了這樣一個需求。後端返給你一個數組。類似如下：
let arr=[
{name:'one',dataUrl:'/api/one',age:20},
{name:'two',dataUrl:"/api/two",age:30},
{name:'three',dataUrl:'/api/three',age:32}
]
dataurl就是要發送請求的接口地址。你要做的是遍歷這個數組。發送請求，同時拿到正確的返回值。分別對應。
forEach對於異步請求其實存在不確定性。無法保證數據的對應。而for --of採用迭代器去遍歷。所以可以保證數據能正確對應。最初的實現如下：
let arr=[
{name:'one',dataUrl:'/api/one',age:20},
{name:'two',dataUrl:"/api/two",age:30},
{name:'three',dataUrl:'/api/three',age:32}
]
let obj={}
let promisArr=arr.map(item=>axios.get(item.dataUrl))
Promise.all(promisArr).then(res=>{
let data=res.data
for(let item of arr)=>{
obj[item.name]=?????
})
console.log("obj:",obj)
}).catch(err=>{
console.log('res--err:',err)
})
但問題是promise.all是一個數組，obj[item.name]=的值到底是哪一個呢？如果知道當前的索引，那麼問題就迎刃而解，
如何在for --of 得到index索引值？
辦不到？所以我們只能想其他辦法：還好有es6---給我們提供了Map數據結構：
所以我們可以 這麼來：
let arr2=arr.map( ( item, i ) => [ i, item ] )
let map=new Map(arr.map( ( item, i ) => [ i, item ] ) )
let obj={}
let promisArr=arr.map(item=>axios.get(item.dataUrl))、
Promise.all(promisArr).then(res=>{
let data=res.data
for(let [index,ele] of map){
obj[ele.name]=res[index].data
}
console.log("obj:",obj)
}).catch(err=>{
console.log('res--err:',err)
})
我們不再對數組進行遍歷，轉而採用map 通過for---of進行遍歷。同時通過index進行對應。這樣就能保證每次請求的結果的index都能和最初數組的name進行對應
map大法好