[JS_Basic] 자바스크립트_Promise 함수

Promise 함수가 뭔가요?

프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다.

Promise 가 왜 필요한가요?

자바스크립트는 비동기 방식으로 작동이 됩니다. 이전의 글에서 얘기 했던 것 처럼, 서버에서 데이터를 받기도 전에 ! 비동기의 성격 때문에 빈 데이터를 출력하는 경우가 발생하는 이를 방지하기 위해 사용이 됩니다.

 

뿐만 아니라, 위와 같은 문제를 해결 하기 위해서 나온 콜백 함수의 문제점인 "콜백 지옥"(=Callback Hell)을 완화하는 목적 O

 

Promise_코드 ( from_ 캡틴판교님 )

[1] 콜백 함수를 이용한 비동기 처리

function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}

getData(function(tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

[2] Promise를 사용한 비동기 처리

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에 전달됨
});

 

Promise의 3가지 상태

프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태(states)입니다. 여기서 말하는 상태란 프로미스의 처리 과정을 의미합니다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖습니다.

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

이행 (Fulfiled)

resolve는 프로미스가 결과 값을 반환 해줬을 떄 실행이 가능한 영역을 의미한다.

즉, 이행이 가능하다는 것을 resolve를 통해 확인 하면, 이후에 then을 이용하여 이를 실행한다.

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

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

실패 (Rejected)

Reject는 비동기 처리의 실패를 의미하는데, 이때는 then 뒤에 catch를 붙여주어 err를 출력해준다.

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
});

종합 예제

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
});