[javascript] Promise

 

Promise

프로미스란 비동기 처리에 사용되고 비동기 처리의 상태(성공, 실패 등)와 결과값을 반환하는 객체이다. 콜백 함수의 단점을 보완하기 위해 ES6에서 도입되었다. (프로미스는 함수에 콜백을 전달하는 대신 콜백이 첨부된 객체!)

 

callback 함수

콜백 함수는 다른 함수의 인자로 호출되는 함수를 통칭한다. 프로미스가 등장하기 이전 자바스크립트에서 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용하였다. 하지만, 콜백 함수를 사용하여 비동기 처리를 할 경우, 비동기 처리 중에 발생한 에러 처리가 곤란하였으며, 중첩된 비동기 처리를 위한 코드를 작성했을 때 콜백 지옥이 발생했다.

callback hell

 

 

• 프로미스의 생성: 프로미스 생성자 함수로 프로미스 객체를 생성한다. 생성할 때 비동기 처리를 위한 콜백 함수를 인수로 넣어 생성하고, 이 콜백 함수는 다시 resolve와 reject 함수를 인수로 받는다.  
• 프로미스의 상태:  생성된 직후의 프로미스는 기본적으로 pending 상태이다. 이후 비동기 처리가 수행되면 비동기 처리 결과에 따라 프로미스의 상태가 변화하고, 이 상태에 따라 resolve 또는 reject 함수를 호출한다.

비동기 처리가 수행되어 (성공이든 실패든) pending 상태가 아닌 상태를 통틀어 settled 상태라고 한다.

 

 

• 프로미스 후속 처리 메서드: 프로미스의 상태가 변화하면 이에 따른 후속 처리를 해야 한다. 프로미스의 상태에 따라 후속 처리 메서드에 인수로 넣어준 콜백 함수가 선택적으로 호출된다. 모든 후속 처리 메서드는 프로미스를 반환하며, 비동기로 동작한다.
• /// 
  1. Promise.then: 2개의 함수를 인수로 전달받는 메서드이다. 첫 번째 콜백 함수는 프로미스가 fulfilled 상태(resolve 함수 호출)가 되었을 때 호출된다. 이 콜백 함수는 프로미스의 처리 결과를 인수로 받는다. 두 번째 콜백 함수는 프로미스가 rejected 상태(reject 함수 호출)가 되었을 때 호출되며, 이 콜백 함수는 프로미스의 에러를 인수로 전달받는다.
  2. Promise.catch: 프로미스가 rejected 상태일 때 호출된다. then의 두 번째 함수와 같은 경우이다. 그래서 가독성을 위해 then에 성공 케이스만 담고 catch를 따로 써주는 것이 보편적이라고 한다.
  3. Promise.finally: 프로미스의 성공이나 실패 결과와 상관없이 처리 종료 후에 무조건 한 번 호출되는 메서드이다. 프로미스의 상태와 관계없이 공통적으로 수행해야 할 처리 내용이 있을 때 유용하다.

간단한 프로미스 예시

 

• 기타 메서드
  1. Promise.all([promise1, promise2, promise3]): 프로미스의 배열을 받아 모두 성공한 프로미스의 결과값을 배열로 반환한다. 하나라도 실패하면 즉시 실패한 프로미스의 실패 이유를 반환한다.
  2. Promise.allSettled(): 프로미스의 배열을 받아 처리가 모두 끝난 프로미스의 결과값 또는 실패 이유를 배열로 반환한다.
  3. Promise.race(): 메서드 이름처럼 레이스이다. 배열로 받은 프로미스 중 가장 먼저 처리가 끝난 프로미스의 결과값 또는 실패 이유를 반환한다.
  4. Promise.resolve(): 성공한 프로미스를 바로 반환한다.
  5. Promise.rejected(): 실패한 프로미스를 바로 반환한다.