[JS] 프라미스 Promise 알아보기

 

Promise

ES6에서 등장한 Promise 객체는 자바스크립트에서의 비동기 처리를 획기적으로 변화시켜주었다. 기존에 '콜백 지옥'이라 불리던 것을 해결하며 더 명료한 코드를 작성할 수 있도록 해준다.

 

Promise 객체 속성

프로미스 객체를 콘솔에 찍어보았다.

Promise는 catch, finally, then 등의 메소드를 가지고 있고 state와 result라는 내부 프로퍼티를 가지고 있다.

 

Promise는 3가지 state를 갖는다.

• pending - 비동기 처리가 아직 완료되지 않은 상태
• fulfilled - 비동기 처리가 성공적으로 끝나 resolve가 호출된 상태
• rejected - 비동기 처리 중 오류가 발생해 reject가 호출된 상태

위 상태에 따른 result는 아래와 같다.

• pending 상태 - undefined
• fulfilled 상태 - resolve를 호출할 때 넘겨준 값.
  • resolve("Done!") 이렇게 호출하면 result는 "Done!" 이 된다.
• rejected 상태 - reject를 호출할 때 넘겨준 에러 객체.
  • reject(new Error()) 이렇게 호출하면 result는 Promise {<rejected>: Error... 로 시작하는 에러 객체가 할당된다.

 

resolve나 reject호출을 안 할 경우는 계속 pending상태를 유지한다.

문법

const promise = new Promise((resolve, reject) => {
  // ... 비동기 처리
  resolve(result); // 성공시
  reject(new Error()); // 실패시
})
  .then(result => console.log(result)) // resolve가 실행됐을 경우
  .catch(error => console.log(error)) // reject가 실행됐을 경우
  .finally(() => console.log('finally')) // 성공/실패에 상관없이 항상 호출

문법 및 사용법은 위와 같다.

1. 비동기 로직을 Promise 객체로 감싸고 해당 로직이 성공할 경우 resolve를 실패할 경우 reject를 호출하도록 코드를 구성한다.

2. 비동기 로직이 완료된 후 처리되어야 하는 코드를 then과 catch에 넣는다.

3. then과 catch는 각각 인자로 resolve와 reject를 호출할 때 넘겨준 인자들을 받는다.

 

에러는 가급적 catch로 처리

.then에서 첫 번째 인수는 프라미스가 이행되었을 때 실행되는 함수, 두 번째 인수는 프라미스가 거부되었을 때 실행되는 함수이기 때문에 에러 처리시 아래처럼 코드를 구성하는것도 가능하다.

const promise = new Promise((resolve, reject) => reject(new Error('hi')));
promise.then(result => alert(result), error => alert(error));

그러나 프로미스가 이행(resolve)된 후, 첫 번째 인수인 함수에서 에러가 발생했을 경우는 에러 캐치가 제대로 이루어지지 않는다.

아래 코드를 보자.

const promise = new Promise((resolve, reject) => resolve('hi'));

// .then 사용
promise.then(result => {
  console.log(result);
  throw new Error('This is Error 1');
}, (error) => {
  console.log(error);
})

// .catch 사용
promise.then(result => {
  console.log(result);
  throw new Error('This is Error 2');
}).catch((error) => {
  console.log(error);
})

위 코드의 실행결과는 아래와 같다.

.catch를 사용한 코드에서는 에러를 무사히 잡아서 콘솔에 출력했지만 .then만 사용한 코드에서는 에러를 잡지 못하고 뱉어버렸다.

그래서 가급적 catch를 사용해서 에러를 처리하는 것이 안전하다. 그리고 코드를 읽는 입장에서도 두번째 인자로 에러를 처리하는것은 catch보다 명시적이지 못하다.

 

 

 

참고 자료 : joshua1988.github.io/web-development/javascript/promise-for-beginners/