[ES6] Promise에 대하여

Promise란?

ES6에서 비동기 처리를 위한 패턴.

전통적인 콜백 패턴이 가진 단점을 보완하고, 비동기 처리 시점을 명확하게 표현한다.

 

아래 코드는 전통적인 콜백 패턴이 가진 단점을 보여준다.

 

위 코드를 개선하기 위해 Promise를 사용한다.

 

Promise의 생성

 

Promise의 후속 처리 메서드

1. then

then 메소드는 두 개의 콜백 함수를 인자로 전달 받는다. 첫 번째 콜백 함수는 성공(fulfilled, resolve 함수가 호출된 상태) 시 호출되고 두 번째 함수는 실패(rejected, reject 함수가 호출된 상태) 시 호출된다.

 

2. catch

예외(비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러)가 발생하면 호출된다. 따라서 에러 처리는 catch 메서드를 사용하는 것이 더 효율적이다.

 

예제 코드

 

Promise Chaining이란?

비동기 함수의 처리 결과를 가지고 다른 비동기 함수를 호출해야 하는 경우, 함수의 호출이 중첩(nesting)이 되어 복잡도가 높아지는 콜백 헬이 발생한다. 프로미스는 후속 처리 메소드를 체이닝(chainning)하여 여러 개의 프로미스를 연결하여 사용할 수 있다. 이로써 콜백 헬을 해결한다.

 

Promise 정적 메서드

(1) Promise.resolve

인자로 전달된 값을 resolve하는 Promise를 생성한다.

 

 

(2) Promise.reject 

Promise.reject 메소드는 인자로 전달된 값을 reject하는 프라미스를 생성한다.

 

 

(3) Promise.all

프로미스가 담겨 있는 배열 등의 이터러블을 인자로 전달 받는다. 그리고 전달받은 모든 프로미스를 병렬로 처리하고 그 처리 결과를 resolve하는 새로운 프로미스를 반환한다. 

모든 프라미스의 처리가 종료될 때까지 기다린 후 아래와 모든 처리 결과를 resolve 또는 reject한다. 모든 프로미스의 처리가 성공하면 각각의 프로미스가 resolve한 처리 결과를 배열에 담아 resolve하는 새로운 프로미스를 반환한다. 이때 첫번째 프로미스가 가장 나중에 처리되어도 Promise.all 메소드가 반환하는 프로미스는 첫번째 프로미스가 resolve한 처리 결과부터 차례대로 배열에 담아 그 배열을 resolve하는 새로운 프로미스를 반환한다. 즉, 처리 순서가 보장된다.

 

첫번째 프로미스는 3초 후에 1을 resolve하여 처리 결과를 반환한다.

두번째 프로미스는 2초 후에 2을 resolve하여 처리 결과를 반환한다.

세번째 프로미스는 1초 후에 3을 resolve하여 처리 결과를 반환한다.

 

프로미스의 처리가 하나라도 실패하면 가장 먼저 실패한 프로미스가 reject한 에러를 reject하는 새로운 프로미스를 즉시 반환한다.

 

위 예제의 경우, 세번째 프로미스가 가장 먼저 실패하므로 세번째 프로미스가 reject한 에러가 catch 메소드로 전달된다.

 

 

(4) Promise.race()

Promise.race 메소드는 Promise.all 메소드와 동일하게 프로미스가 담겨 있는 배열 등의 이터러블을 인자로 전달 받는다. 그리고 Promise.race 메소드는 Promise.all 메소드처럼 모든 프라미스를 병렬 처리하는 것이 아니라 가장 먼저 처리된 프라미스가 resolve한 처리 결과를 resolve하는 새로운 프라미스를 반환한다.

 

 

 

참고 사이트

https://poiemaweb.com/es6-promise

Promise | PoiemaWeb