[JavaScript]프로미스(Promise)

프로미스(Promise)

JavaScript는 비동기 처리를 위해 사용되는 객체이다. 하나의 패턴으로 콜백 함수를 사용하지만 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하다.

 

프로미스의 필요성

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용된다. 예를 들어 웹이나 애플리케이션을 구현하기 위해서 데이터를 요청하고 받아오기 위해 밑에 API를 사용한다.

$. get('url 주소/users/1', function(res) {

});

위에 API가 실행되면 서버에 데이터 요청을 하고 데이터를 받아오기 전에 데이터를 표시하려고 하면 ERROR가 발생하거나 빈 화면이 뜬다. 이와 같은 문제점을 해결하기 위한 방법이 프로미스이다.

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달된다.
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달된다.
});

콜백 함수로 처리하던 구조에서 new Promise(), resolve(), then()와 같은 프로미스 API를 사용한 구조로 바뀌었다. 

 

프로미스의 3가지 상태(States)

- Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
- Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 프로미스 상태는 프로미스의 처리 괴정을 의미한다. new Promise()로 프로미스를 생성하고 종료까지 3가지 상태를 갖는다.

 

Pending(대기)

new Promise(function(resolve, reject) {
  // ...
});

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.

 

Fulfilled(이행)

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받는다.
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

콜백 함수의 인자 resolve를 실행하면 이행(Fulfilled) 상태가 되는데 then()을 이용하여 처리 결과 값을 받을 수 있다.

 

Rejected(실패)

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받는다.
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

new Promise()로 프로미스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있는데 reject를 같이 호출하면

실패(Rejected) 상태가 된다.

 

프로미스 처리 흐름

프로미스 Error 처리 방법

프로미스 코드가 정상적으로 동작한다고 해도 실제 서버를 구현하다 보면 네트워크 연결, 서버 문제 등으로 오류가 발생할 수 있다. 

따라서 프로미스의 에러 처리 방법에는 2가지 방법이 있다.

 

1. then()의 두 번째 인자로 에러 처리하는 방법

getData().then(
  handleSuccess,
  handleError
);

2. catch()를 이용한 방법

getData().then().catch();

2가지 방법 모두 프로미스의 reject() 메서드가 호출되어 실패 상태가 된 경우에 실행된다.

하지만 가급적으로 catch()로 에러를 처리하는게 더 효율적이다.

// then()의 두 번째 인자로는 감지하지 못하는 오류
function getData() {
  return new Promise(function(resolve, reject) {
    resolve('hi');
  });
}

getData().then(function(result) {
  console.log(result);
  throw new Error("Error in then()"); // Uncaught (in promise) Error: Error in then()
}, function(err) {
  console.log('then error : ', err);
});

getData() 함수의 프로미스에서 resolve() 메서드를 호출하여 정상적으로 로직을 처리했지만, then()의 첫 번째 콜백 함수 내부에서 오류가 나는 경우 오류를 제대로 잡아내지 못한다. 그 결과 오류가 발생한다.

하지만 catch()로 처리하면 다른 결과가 나온다.

// catch()로 오류를 감지하는 코드
function getData() {
  return new Promise(function(resolve, reject) {
    resolve('hi');
  });
}

getData().then(function(result) {
  console.log(result); // hi
  throw new Error("Error in then()");
}).catch(function(err) {
  console.log('then error : ', err); // then error :  Error: Error in then()
});

따라서, 더 많은 예외 처리 상황을 위해서는 프로미스의 끝에 가급적 then()보다는 catch()를 붙이는게 좋다.