Promise

JavaScript와 React를 활용하여 다양한 API와 통신하며 데이터를 주고 받는 와중, 비동기 통신에 사용되는 객체인 Promise에 대한 개념이 정확하게 확립되지 않았다고 느꼈다.

앞서 정의 한 바와 같이 Promise는 세 가지 state를 갖는다.

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

https://velog.io/@dmdwn3979/Callback-vs-Promise-vs-async-await

그럼 왜 이런 Promise가 필요하고 어떻게 사용되는 것인가?

웹 애플리케이션을 구현할 때, API를 통해 데이터를 요청하고 받아오기도 한다. 이때 비동기 통신의 특성상, 데이터를 받아오기도 전에 출력하려고 한다하면 오류를 발생시키거나 빈 화면을 출력할 것이다. 이러한 문제점을 해결하는 것이 Promise이다.

이 개념을 확립하고 다시 본다면, 앞서 말한 세가지 state에 대해 이해하기 쉬워진다.
아래 코드를 보자

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에 전달됨
});
//출처 캡틴판교 https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#%ED%94%84%EB%A1%9C%EB%AF%B8%EC%8A%A4%EC%9D%98-3%EA%B0%80%EC%A7%80-%EC%83%81%ED%83%9Cstates

위의 코드를 보면, new Promise(), resolve(), then() 와 같은 Promise 를 사용하는 것을 알 수 있다.

new Promise()메서드를 호출 할 시 대기(Pending) 상태에 이른다.
이는 콜백 함수의 인자 resolve를 통해 이행(Fulffied)되고, 이행 상태가 처리되면 then()을 활용하여 처리 결과 값을 받을 수 있다.

이 처럼 비동기 통신의 특성 상, 동작이 시작되고 끝날 때의 상태에 따른 동작을 구분하여 구현 할 수 있다.

또한 실패(Rejected) 상태에 이르게 할 수 있는 reject() 메서드를 활용할 수 있으며 catch()를 통해 결과 값을 받을 수 있다.

Promise의 특성

가장 많이 쓰이고, 많이 볼 수 있는 특성 중 하나는 여러 개의 Promise가 연결 될 수 있다는 것이다.

then() 메서드를 통해 새로운 프로미스 객체가 반환되는데 이를 이어 사용 가능하다.
예를 들어 사용자 정보를 받아 파싱, 인증 등의 작업을 거친다거나 받은 객체를 특정한 형식(JSON)으로 파싱 할 경우 등 자주 사용되는 방식이다.

getData(list)
	.then(res => res.json())
	.then(res => console.log(res))

에러는 catch()로 잡는 것이 바람직하다. then()의 첫 번째 콜백 함수 내부에서 오류가 나는 경우 then()의 두 번째 인자로 처리하면 제대로 잡아내지 못한다