이 전에 글에서 콜백지옥에 대한 어느정도 개념은 잡고 이제는 그 지옥에서 탈출할수 있는 방법에대해서 알아 보려고 합니다. 그런데 여기서 Callback, Promise, async await 이 세가지는 모두 비동기 처리를 다루는 방법들이라고 알수가 있습니다.

Promise

비동기 처리를 하는 하나의 단위라고 할수 있으며, 비동기 작업들을 쉽게 관리할수 있습니다.

Promise를 사용하는 이유?

Ajax통신이나, 파일읽기등의 시간이 걸리는 작업을 하게 되면 비동기적으로 처리를 하게 되는데 이때 작업 수행이 정상적으로 전달되었는지 아니면 에러가 발생했는지 결과를 받을수 있게 해주기 때문

Promise의 state(상태)

Promise의 상태를 보면 크게 (pending-수행중) / (Fulfilled-완료) / (Rejected-실패)
이렇게 3가지 상태를 가지고 있습니다.

1. Pending(대기 상태)

new Promise();

new Promise() 라는 메소드를 사용하면 기본적으로 Pending상태가 되게 됩니다.

new Promise(function(resolve,rejcet){
	...
});

메소드를 호출할때는 콜백함수를 사용할수 있는데 이때 인자값을 resolve, reject를 받게 됩니다.

2. Fulfilled(완료 상태)

function data(){
  return new Promise(function(resolve,rejcet){
  	const data = "완료 되었습니다.";
    resolve(data);
  });
}

data().than(function(resolvedata){
	console.log(resolvedata)
});

이런 형태로 resolve된 값을 콜백함수로 이행되면 than()을 이용해서 완료가 되서 return된 값을 사용할수가 있는것을 볼수가 있습니다.

3. Rejected(실패 상태)

function data(){
  return new Promise(function(resolve,rejcet){
    rejcet(new Error("에러가 발생했습니다."));
  });
}

data()
	.than()
    .catch(function(error){
    	console.log(error);
    });

그럼 reject를 이용해서 return을 해주면 이번에는 실패했다는 처리 결과값을 catch()를 이용해서 얻을수가 있습니다.

Promise 예제

function Data() {
  return new Promise(function(resolve, reject) {
    $.get('url링크', function(res) {
      if (res) {
        resolve(res);
      }
      reject(new Error("통신 실패"));
    });
  });
}

Data()
	.then(function(resolvedata) {
  		console.log(resolvedata);
   	})
    .catch(function(error) {
  		console.error(error);
	});

대표적인 예제라고 볼수 있는데 ajax통신을 이용해서 통신에 성공 여부를 확인할수 있는 코드입니다. 이미 위에서 방식에 대해서 이해를 하고 왔기 때문에 url링크에 response가 정상적으로 반영이 되었다면 resolve해서 then을 통해 정상호출을 받았을 것이고, 실패 했다면 reject를 통해서 통신 실패라는 결과 값을 도출해 낼수가 있었습니다.

콜백 지옥 (가독성)

전에 콜백 지옥에 빠지면 가독성이 안좋다 라고 이야기한적이 있는데 그 이유는 콜백함수가 많아질수록 들여쓰기가 많아져서 계속 피노키오 코처럼 늘어나게 되는 상황이 발생되었는데요.
Promise를 사용하게 된다면 이런 문제가 해결되는것을 볼수가 있습니다.

function Data() {
  return new Promise(function(resolve, reject) {
  setTimeout(function(){
  	resolve(1);
  }, 5000);
 });
}

Data()
	.then(function(resolvedata) {
  		console.log(resolvedata); => 1
        return resolvedata + 1;
   	})
    .then(function(resolvedata) {
  		console.log(resolvedata); => 2
        return resolvedata + 1;
   	})
    .then(function(resolvedata) {
  		console.log(resolvedata); => 3
        return resolvedata + 1;
   	})

간단한 비동기로 처리되는 setTimeout메소드를 사용해서 예시를 들어 보겠습니다. 여기서 볼수 있는것은 resolve 데이터를 then이 받는데 시간을 5초간 기다리게 됩니다. 이때 상태가 Promise는 Pending 상태에 빠져있고 시간이 다되서 then이 resolvedata를 받게 될때가 Promise가 Fulfilled 상태가 되었다고 볼수가 있습니다. 그런데 이때 그 밑에 then이 나오고 또 then이 나오게 된다면 이럴때는 첫번째 then이 return 값을 + 1을 해서 넘겨주게 되고 그 밑에 then이 값을 받아서 +1을 해서 넘겨주게 되면 각각 return 값들은 1,2,3이 되어서 출력되는것을 확인할수가 있습니다. 여기서 볼수있는것은 들여쓰기를 하지않고도 충분히 호출을 해줄수 있다는것이다. 이렇게 되면 가독성이 좋아져서 코드를 읽는대도 도움이 될거라고 생각한다.

Promise 정리

Promise는 비동기 상태에서 결과값을 정확하게 처리가 되어서 값을 반환할때 사용한다. 결과값이 아직 준비상태일때 Pending 상태 값이 정상적으로 완료가 되어서 출력할때 Fulfilled 상태 값이 정상적으로 출력이 되지않고 에러가 발생했을때 Rejected 상태라고 한다.