프론트(리액트)에서 데이터를 처리할 때 서버에서 리소스 베이스로 API가 열려있다 보니 배열을 돌면서 각 id로 특정 데이터를 조회하고 그것을 가공하는 로직이 필요했다.
이럴 때 Promise.all 을 사용하면 편리한 것 같다.
interface SomeDataChild {
subData: string;
subContents: string;
}
interface SomeData {
id: string;
contents: string;
child?: SomeDataChild;
}
const someData:SomeData[] = [
{
id: 'a1',
contents: 'abc',
},
{
id: 'a2',
contents: 'bce',
},
{
id: 'b1',
contents: 'bbb',
}
]
const processData = async (someData:SomeData[]) => {
const children = await Promise.all(
someData.map(async item => {
const res = await axiosInstance.get<SomeDataChild>('a url', {
params: {
id: item.id
}
});
return res.data;
})
)
return someData.map((item, index) => {
item.child = children[index];
return item;
})
}예제 코드는 좋은 예는 아니지만 생각나는대로 적어봤다.
나중에 예제 코드를 좀 더 다듬어야겠다.
그 외 Promise 관련 메서드들
움직이는 만큼 행복해진다