[TIL] 210727 오늘 공부는 promise.all()

한번에 여러 개의(5개) 서버 요청을 하고, 모든 요청에 대한 응답을 다 받았을 때, 그 때 화면을 렌더링 하려면 어떻게 해야하냐는 처리에 대답을 하지 못했다. 끙... state를 요청 갯수만큼 만든다고 했는데 정말 비효율적인 대답이었다. (대답하고 속으로 매우 좌절함)
그리고 버스타고 가는 도중 자바스크립트 스터디원 중 한 분이 단톡방에서 promise.all 메서드에 대해서 얘기했는데, 순간 그 질문이 떠올랐다. 유레카! ! ! 아 맞다 프로미스 올..... 그래.... 드림코딩 엘리 인강 들으면서 배웠었지!
비동기의 병렬처리!  

대답 못했으면 제대로 모르는 것이므로, 다음번에는 잘 대답하기 위해 오늘의 공부는 promise.all() 로 정했다(. ❛ ᴗ ❛.)

 

 promise.all() 

 

Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다.
 

MDN 예제를 통해 살펴보자. 

Promise.all을 통해 배열 형태로 여러 프로미스를 넣어준다. 그리고 then을 통해 해당 프로미스를 통해 반환된 값을 받아서 출력해준다. 결과값으로 3, 42, "foo"가 나온다. 

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

 

여러개의 비동기 처리를 병렬로 할 수 있다. 

 

순서가 보장되지 않아도 되는 상황에서 말이다.
즉 유저를 조회하고, 그 유저의 아이디를 통해 유저 정보를 가져온다의 경우는 아니다. 이 경우에는 callback을 사용해야한다. 

여러개의 비동기 처리 함수(프로미스 객체)들을 동시에 시작한다. async await보다 빠르게 실행될 수 있다. 마지막 완료되는 함수까지 기다린 후 값을 반환한다. 반환 순서는 실행 순서와 동일하다.  

추가 장점으로는, 

중간에 어떤 함수가 에러가 나면 실패를 즉시 반환한다. 가장 빨리 에러를 반환하는 함수의 시간을 기준으로 동작이 종료된다. 

 

예제 코드를 통해 확인해보자

setTimeout으로 1초 뒤에 파라미터로 전달한 숫자에 10을 더하는 함수를 만든다. 
promise.all()에 배열로, plusTen 함수 3개를 이어준다. 1초 후에 결과값의 배열을 받을 수 있다. 동시에 시작했기 때문이다. 

function plusTen (num) {
	return new Promise((resolve, reject)=>{
    	setTimeout(()=>{
        	let result = num + 10;
            console.log(result);
            resolve(result);
        
        },1000);
    });
}

Promise.all([plusTen(5), plusTen(10), plusTen(15)]).then(result => {
	console.log("result is", result);
});

//15 (5번째 줄)
//20 (5번째 줄)
//25 (5번째 줄)
// result is [15, 20, 25]

 

이것은 스터디원의 promise.all() 사용 예제이다. (고맙습니다 배추님) * 배추의 블로그는 여기서 

첫번째는 async await으로 구현한것이고 두번째는 promise.all()로 구현했다.
promise.all()에 먼저 받아야하는 dispatch 함수 2개를 받아주고, 그 결과 이후에 다음 3개의 dispatch 함수를 사용하기 위해 사용했다.