콜백지옥, promise

콜백지옥

function delay(sec, callback){
	setTimeout(()->{
		callback(new Date().toISOString());
	}, sec * 1000);
}

delay(1, (result) => {
	console.log(1, result);
})

delay(2, (result) => {
	console.log(2, result);
})

delay(3, (result) => {
	console.log(3, result);
})

비동기함수를 이용해서 코드를 실행하면 1초간격으로 delay함수가 실행된다. 그런데 비동기호출이 많아지게되면 코드도 길어지고 가독성도 떨어지기때문에 비동기를 한 함수에 묶어서 사용할 수 있다.

function delay(sec, callback){
	setTimeout(()->{
		callback(new Date().toISOString());
	}, sec * 1000);
}

delay(1, (result) => {
	console.log(1, result);

	delay(1, (result) => {
	console.log(2, result);

		delay(1, (result) => {
			console.log(3, result);
 	   });
    });
})

위 처럼 한번의 호출에 여러번 비동기가 실행될 수 있다. 하지만 이것도 코드가 길어지게되면 비동기의 실행 순서나 가독성에도 좋지 않기때문에 콜백지옥이라 부르면 이를 해결하기위해 promise를 사용한다.

Promise 개념

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1);
  }, 2000);
})
.then(function(result) {
  console.log(result); // 1
  return result + 10;
})
.then(function(result) {
  console.log(result); // 11
  return result + 20;
})
.then(function(result) {
  console.log(result); // 31
});

Promise안에 비동기함수를 선언하고 resolve()를 호출하는 예제다.

resolve()가 호출되면 2초뒤에 첫번째 .then이 실행되고 result+10을 리턴하여 다음 로직으로 넘겨준다. 넘겨받은 값이 콘솔로 출력이 되고 result+20을 리턴하여 다음 로직으로 넘겨준다. 마지막으로 넘겨받은 값을 콘솔로 출력하여 31이 출력된다.