[JavaScript] 비동기 처리를 위한 Promise

이번에는 데이터베이스에서 요청한 데이터를 받아 화면에 표시할 때 사용하는 Promise에 대해 공부해보겠습니다.

🔶 Promise란?

Promise는 JS 비동기 처리에 사용되는 객체입니다. 주로 Get 방식을 요청할 때 사용합니다. 그렇다면 왜 사용하는 것일까요?

만약 내가 데이터를 보내달라고 요청했는데 데이터를 모두 받아오기 전에 화면에 데이터를 표시하려고 하면 오류가 발생합니다. 이때 이를 해결하기 위해 사용하는 것이 바로 Promise입니다.

function getData() {
  // new Promise() 객체 추가
  return new Promise(function(resolve, reject) {
    $.get('url', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
    reject(new Error("Request is failed"));
  });
}

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

}).catch(function(err) {
  console.error(err); // reject 시 Error 출력
});

🔶 Promise의 3가지 상태

3가지 상태는 Promise의 처리 과정을 의미합니다. new Promise()로 Promise를 생성하고 종료할 때까지 3가지 상태를 갖습니다.

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

📌 Pending

new Promise() 메서드를 호출하면 대기 상태가 됩니다.

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

📌 Fullfilled

여기서 콜백 함수의 인자 resolve를 아래와 같이 실행되면 이행 상태가 된다. 이후 then을 이용하여 처리 결과 값을 받을 수 있습니다.

function getData(){
return new Promise(function(resolve, reject) {
   const data = 200;
   resolve(data);
});

}

getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

📌 Rejected

new Promise()로 프로미스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다고 했습니다. 여기서 reject를 아래와 같이 호출하면 실패(Rejected) 상태가 됩니다.

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

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