반응형
따로따로 요청하던 것을 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
반응형
'프론트엔드 웹 > React' 카테고리의 다른 글
React Emoji Not Showing (Window) (0) | 2022.12.19 |
---|---|
Module not found: Error: You attempted to import /node_modules/react-refresh/runtime.js which falls outside of the project src/ directory (1) | 2022.08.31 |
검색할 때 debounce를 활용해서 API 호출 한 번만 하기 (0) | 2022.08.17 |
Axios Error code/status 처리하기 (0) | 2022.07.06 |
이메일(e-mail)로 연결하는 a tag (0) | 2022.06.28 |