Promise.all로 반복되는 API 한번에 모아 보내기

프로젝트를 진행하면 가끔 이런 경우가 있다.

1. 데이터 여러 개를 받아야 해서 배열로 받긴 했는데, api에는 하나씩 post 해야 하는 경우

2. 여러개의 데이터를 한 군데 모으긴 했는데 , api에는 하나씩 post 해야 하는 경우

 

이럴 때 maps를 돌려 처리하면 편리하지만 api를 여러 번 호출하기 때문에 서버에 부담도 된다.

데이터를 모아서 배열 형태로 한방에 보내는 방법은 없을까 고민을 하다가 promise all() 메서드를 찾았다.

 

Promise.all() 메서드를 간단히 설명하면 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환한다고 하는데 어떻게 사용해야 할까?

 

Promise.all()을 사용하지 않을때:

const ArrayData = [{name:"AAA",number:1},
		{name:"BBB",number:2},
		{name:"CCC",number:3}]
        
 const onPost = async () => {
 	try{
    		await postAPI(ArrayData[0]),
        	await postAPI(ArrayData[1]),
        	await postAPI(ArrayData[2]),
        } catch(error){
        /** 첫번째 함수에서 error이 나더라도 위의 api들이 모두 실행되고 에러가 들어옴 */
        }
 );

 

 

아주 기본적인 예시 :

const ArrayData = [{name:"AAA",number:1},
		{name:"BBB",number:2},
		{name:"CCC",number:3}]
        
 const onPost = async () => {
  	try{
    	await Promise.all([
    		postAPI(ArrayData[0]),
        	postAPI(ArrayData[1]),
        	postAPI(ArrayData[2]),
        } catch(error) {
        	/** 에러가 뜨자마자 에러가 들어옴*/
        }
    ]);

보내야 할 data를 준비하고 api를 배열로 넣음으로써 가능하다.

 

나는 여기서 조금만 더 생각해서 배열을 하드코딩으로 넣지 않는 방법을 생각해 보았다.

 

살짝 응용한 예시 :

const ArrayData = [{name:"AAA",number:1},
		{name:"BBB",number:2},
		{name:"CCC",number:3}]
        
 const onPost = async () => {
 try{
    await Promise.all(
    	ArrayData.map( (data)=>{
        	postAPI(data)
    	})
 	} catch {
 	  	/** 에러가 뜨자마자 에러가 들어옴*/
 	}
 );

 

 

Promise all의 장점으로는 

• promise all을 사용하지 않을 때 비동기 처리과정으로 인해 함수들이 기다리는 시간이 길어진다 => 속도가 느려짐
• promise all은 병렬로 비동기 처리를 하기 때문에 하나씩 처리하는 것이 아닌 세 개를 동시에 처리하기 때문에 빠르다.
• 또한 에러가 났을 때 순서와는 상관없이 가장 먼저 에러를 뱉는 함수를 기준으로 catch를 반환한다.