[자바스크립트] Promise

Promise

• 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리한는 데도 한계가있다
• ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다 프로미슨느 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수있다는 장점이 있다
• 프로미스는 Promise 생성자 함수를 통해 인스턴스화한다. Promies생성자 함수는 비동기 작업을 수행할 콜백 함수를 인자로 전달받는데 이 콜백 함수는 resolve와 reject함수를 인자로 전달 받는다.
• promise는 비동기 처리가 성공(fulfilled)하였는지 또는 실패(rejected)하였는지 등의 상태(state) 정보를 갖는다.
  • pending : 비동기 처리가 아직 수행되지 않은 상태
  • fulfilled : 비동기 처리가 수행된 상태 (성공)
  • rejected : 비동기 처리가 수행된 상태 (실패)
  • settled : 비동기 처리가 수행된 상태 (성공 또는 실패)
• Promise 패턴이 생겨난 가장 중요한 원인은 ‘콜백 지옥’을 해결하기 위해서이다. 비동기 작업을 도와주는 synthetic sugar라고 볼 수 있다.
• 따라서 Promise 객체 자체는 비동기 / 동기 동작을 나누는 기준이 되지 않는다
• 다음과 같은 코드에서 A는 Promise 객체이지만 resolve 혹은 reject가 동기적으로 처리된다

Promise 호출 과정

1. 비동기 함수 내에서 Promise 객체를 생성하고 그 내부에서 비동기 처리를 구현한다. 이때 비동기 처리에 성공하면 resolve 메소드를 호출한다.
2. 이때 resolve 메소드의 인자로 비동기 처리 결과를 전달 하는데, 이 처리 결과는 Promise 객체의 후속 처리 메소드로 전달된다.
3. 만약 비동기 처리에 실패하면 reject 메소드를 호출한다. 이때 reject 메소드의 인자로 에러 메시지를 전달한다. 이 에러 메시지는 Promise 객체의 후속 처리 메소드로 전달된다.

후속 처리 메소드에는 대표적으로 then(Promise 반환)과 catch(예외)가 있다.

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

catch예외(비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러)가 발생하면 호출된다. catch 메소드는 Promise를 반환한다.

Promise 체이닝

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

따라서, then 메소드가 Promise 객체를 반환하도록 하면(then 메소드는 기본적으로 Promise를 반환한다.) 여러 개의 프로미스를 연결하여 사용할 수 있다.

비동기란

• 병렬적으로 태스크를 수행하는 방식이다.
• 요청을 보낸 후 응답의 수락 여부와는 상관없이 다음 태스크가 동작하는 방식이다. a 태스크가 실행되는 시간 동안 b 태스크를 할 수 있으므로 자원을 효율적으로 사용할 수 있다.
• 이때, 비동기 요청시 응답 후 처리할 ‘콜백 함수’를 함께 알려준다. 따라서 해당 태스크가 완료되었을 때, ‘콜백 함수’가 호출된다.