promise의 개념에 대해서

promise 는 자바스크립트 비동기 처리에 사용되는 객체이다.

• 비동기처리는 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용된다.

get('url주소/user/1', function(response) {
  // ...
});

일반적으로 위와 같은 API를 통해 서버에 데이터를 요청, 받아옴 그러나 여기서 데이터를 받기도 전에 데이터를 다 받아온 마냥 데이터를 표시하려고 하면 오류 발생 or 빈 화면
이를 방지하기 위해 프로미스를 사용한다.

new Promise(), resolve(), then()와 같은 프로미스 API를 이용해 프로미스를 사용

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

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

• Fullfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

• 이행을 할 때 resolve()를 실행하면 이행상태가 됨

• 이행 상태가 되면 getData().then(function(resolvedData) { console.log(resolvedData); })
  then 을 이용하여 처리 결과 값을 받을 수 있음
  실패는 reject()로 실행하여 실패상태가됨.

예제

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

위 코드는 서버에서 제대로 응답을 받아오면 resolve() 메서드를 호출하고, 응답이 없으면 reject() 메서드를 호출하는 예제입니다. 호출된 메서드에 따라 then()이나 catch()로 분기하여 응답 결과 또는 오류를 출력.

프로미스 이해하기