[10.12] Promise

Promise

✅ Promise 란? (비동기 처리의 이해)
✅ Promise 가 필요한 이유
✅ Promise 의 형태 및 세가지 상태
✅ Promise 체이닝과 callback 함수의 차이

🤙🏼 Promise 란?

자바스크립트 비동기 처리를 위한 객체 라고 할수 있다.
여기서 비동기처리를 잠깐 짚고 넘어가자면,
특정코드가 완료가 될때까지 기다리지 않고 다음코드를 먼저 수행하는 자바스크립트의 특성이로 볼 수 있다.

🤙🏼 Promise 가 필요한 이유

내가 이번 프로젝트에서 실제 겪었던 get요청으로 받아온 데이터를 차트에 보여줄때 나타난 에러이다.
axios.get() 요청으로 데이터를 받아 then 처리를 했는데
코드작성 직후에는 데이터를 잘 받아오지만 새로고침만 하면 화면에 다음과 같은 프로미스 에러가 나타났다.

콘솔을 찍어보면 각 해당되는 차트마다 undefined, 빈배열 혹은 빈 객체가 먼저 나온 후 그 다음에 데이터가 전송이 되어 화면에는 당연히 오류가 뜨게 된 것이었다.

나같은 경우에는 useState()상태에 요청받아온 데이터의 타입을 상세히 넣어주고 값이 undefined || data 로 받아온 값일때, 라는 조건을 넣어 오류가 생기지는 않았다. 그리고 이게 바로 비동기처리의 문제라는것을 깨달았다.
이론만 공부하다 실제로 맞닥뜨리니 여간 당황스러운게 아니었다.

Promise 는 실제 데이터가 준비된 시점에만 받아온 데이터를 보여준다.
위와같이 서버에서 데이터를 주고받을때 비동기처리로 인해 undefined 가 먼저 나와버려 화면에 오류가 생기는 것을 방지하기 위해 promise 를 사용하는 것이다.

🤙🏼 Promise 형태 및 세가지 상태

Promise 는 받아올 데이터의 함수 내에서 new Promise 를 선언하여 세가지 상태에 따라 결과를 나타낼 수 있다.
new Promise에서 데이터를 잘 받아왔을때 보여줄 resolve, 잘 받아오지 못하여 에러처리가 난 경우 reject 를 콜백함수로 받는다.

new Promise(function(resolve, reject) {
  //받아오는 상태에 따른 값 작성
});

세가지 상태는 다음과 같다.
1. Pending : new Promise() 를 쓰기만 한 상태, 혹은 아직 비동기 처리 로직이 완료되지 않은 상태에서 나타난다.
2. Fulfilled : 비동기 처리 로직이 완료되어 결과로 보여줄 수 있음을 나타낸다. 이때,new Promise의 resolve 콜백함수를 선언하면 된다.
3. Rejected : 비동기 처리 로직이 오류가 나서 제대로 받아오지 못한 상태를 뜻한다. 이때는 reject(new Error('err msg')) 를 작성할 수 있다.

이렇게 데이터를 상태에따라 콜백함수로 나타낸 후 실제로 화면에 나타내기 위해
then().catch() 처리를 해주어야 한다.

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('http://localhost:3000/sample', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}

getData()
  .then((res)=>{console.log(res)})
  .catch((err)=>{console.log(err)})

🤙🏼 Promise 체이닝과 callback 함수의 차이

Promise 의 특징으로 then()을 연결해서 쓸 수 있다는 점이다.
만약 어떠한 정보를 a,b,c 라는 각각의 함수에 맞게 비동기적으로 실행시겨야 할때

function a = () => {return new Promise({...}
function b = () => {return new Promise({...}
function c = () => {return new Promise({...}

getData()
  .then(a)
  .then(b) 
  .then(c) 

로 간단하게 표현 할 수 있다.
그렇다면 똑같이 필요한 데이터만 받아와서 실행시키는 callback 함수와는 어떤차이가 있는것일까?

👿 콜백지옥

비동기 처리를 위해 필요한 데이터 로직을 계속적으로 연결해서 쓸때 생기는 문제점이다.

$.get('http://localhost:3000/sample', function(res) {
	a(res, function(data1) {
		b(data1, function(data2) {
			c(data2, function(data3) {
				d(data3, function(data4) {
				  console.log(data4);
			    });
			});
		});
	});
});

위의 then 체이닝으로 작성한 코드에 비해 가독성이 떨어지고, 이렇게 되면 오류잡을때도 로직을 바로잡기가 어려워진다.