프론트엔드 웹/React

Promise.all map으로 병렬로 요청하기

세리둥절 2022. 8. 31. 14:39
반응형

따로따로 요청하던 것을 Promise.all 을 통해서 병렬로 요청하려고 합니다.

이것이 원래 코드

const sevenDays = ['20220101', '20220202', '20220103', '20220104', ..., '20220107']

const data0 = await axiosUtil.get(`/congestion/${poiId}?date=${sevenDays[0]}`)
const data1 = await axiosUtil.get(`/congestion/${poiId}?date=${sevenDays[1]}`)
const data2 = await axiosUtil.get(`/congestion/${poiId}?date=${sevenDays[2]}`)
const data3 = await axiosUtil.get(`/congestion/${poiId}?date=${sevenDays[3]}`)
const data4 = await axiosUtil.get(`/congestion/${poiId}?date=${sevenDays[4]}`)
const data5 = await axiosUtil.get(`/congestion/${poiId}?date=${sevenDays[5]}`)
const data6 = await axiosUtil.get(`/congestion/${poiId}?date=${sevenDays[6]}`)

return {
	item: sevenDays[6]
    congestion: [
        {
            date: sevenDays[0],
            stat: data0.data.data.congestion.stat,
            raw: data0.data.data.congestion.raw,
        },
        {
            date: sevenDays[1],
            stat: data1.data.data.congestion.stat,
            raw: data1.data.data.congestion.raw,
        },
        {
            date: sevenDays[2],
            stat: data2.data.data.congestion.stat,
            raw: data2.data.data.congestion.raw,
        },
        {
            date: sevenDays[3],
            stat: data3.data.data.congestion.stat,
            raw: data3.data.data.congestion.raw,
        },
        {
            date: sevenDays[4],
            stat: data4.data.data.congestion.stat,
            raw: data4.data.data.congestion.raw,
        },
        {
            date: sevenDays[5],
            stat: data5.data.data.congestion.stat,
            raw: data5.data.data.congestion.raw,
        },
        {
            date: sevenDays[6],
            stat: data6.data.data.congestion.stat,
            raw: data6.data.data.congestion.raw,
        },
    ],
}

 

 

중간에 함수를 통해서 더 간결하게 표현할 수 있습니다. 

const makeCongestionSet = (item: any) => {
    return item.map((x: any, i: number) => {
        return {
            date: item[i].data.data.date,
            stat: item[i].data.data.congestion.stat,
            raw: item[i].data.data.congestion.raw,
        }
    })
}
    
const data = Promise.all(
    sevenDays.map(async (x, i) => {
        return await axiosUtil.get(`/congestion/${poiId}?date=${sevenDays[i]}`)
    }),
).then((values) => {
    return {
        item: values[6].data.data.date
        congestion: makeCongestionSet(values),
    }
})
return data

 

반응형