promise

이전 포스팅에 비동기와 동기를 포스팅했는데, 이어서 비동기를 동기 적으로 실행 시킬수 있는 방법에 대해 포스팅 해보려 한다.

다음과 같은 비동기 함수가 있다.

function work(sec, callback) {
	setTimeout(() => {
    	callback(new Date().toISOString());
        //ISO는 국가 간의 해석오류를 방지하기 위한 날짜 및 시간 관련 데이터의 전세계적인 교환 및 통신을 다루는 국제표준단위라고 한다. 
    }, sec * 1000);
};

work(1, (result) => {
	console.log('first', result);
});

work(1, (result) => {
	console.log('second', result);
});

work(1, (result) => {
	console.log('third', result);
});

이 비동기 함수는 work라는 콜백함수를 3번 호출해서 각 1초가 걸리게 의도해서 총 3초동안 실행되게 하려 했으나, 이를 막상 실행시켜보면 3번 호출 모두 정확히 같은시간에 실행되어 끝나게 된다.
이를 동기적으로 바꿔서 처음 work함수가 실행된후 1초후에 그다음 work함수가 실행되게 하려면 비동기안에 비동기함수를 집어넣는 식으로 작성하면 된다.

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

work(1, (result) => {
	console.log('first', result);
	
    work(1, (result) => {
		console.log('second', result);

		work(1, (result) => {
			console.log('third', result);
        });
    });
});

결과를 보면 첫번째 work함수가 실행된후 두번째 work함수가 1초후에 실행됐고, 총 3초가 걸린것을 알수있다.

첫번째 work함수가 실행이 끝나야지만 그안에 있는 work함수가 실행이 되기 때문이다. 이렇게 비동기 안에 비동기 형태로 작성하면 동기적으로 실행시킬수 있는데, 이를 너무 남용하면 콜백지옥같은 콜백함수안에 콜백함수가 무한 반복되는 읽기 힘든 코드가 생성되게 되고 이는 능률을 저하 시킨다.

이런 콜백지옥을 탈출하려 사용하게 된게 promise이다.
promise의 사용법을 살펴보자.

const workP = sec => {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {
        	resolve(new Date().toISOString());
        }, sec * 1000);
    });
};

workP(1).then((result) => {
	console.log('첫 번째 작업', result);
    return workP(1);
}).then(result) => {
	console.log('두 번째 작업', result);
    return workP(1);
});.then(result) => {
	console.log('세 번째 작업', result);
});

이는 방금전에 살펴봤던 비동기함수와 같은 코드이다. 살펴보면,
workP라는 함수에 promise객체를 생성해서 그 안에 있는 setTimeout함수가 정상적으로 실행되면 resolve를 통해 new Date().toISOString()이 실행되어 result에 담기고, 오류가 뜰 경우 reject를 통해 오류가 실행되어 result에 담기게 된다.

여기서는 성공적으로 실행되어서 new Date().toISOString()이 실행된 결과가 result에 담기게 되고 인자로 받은 1이 sec로 들어가서 1초후에 첫번째 작업이라는 string과 함께 콘솔에 찍히게 된다. 그리고 return workP(1)을 통해 resolve를 1초 후에 반환시켜서 .then이 실행되고 result에 담긴 값을 콘솔에 찍는다. 이런 과정을 .then이 있는 만큼 반복해서 아까 살펴봤던 비동기 함수와 같은 실행결과를 얻게 된다.

그런데 여기서 return workP()를 안해주게 되면 그 다음에 오는 .then의 인자인 result에 반환 값이 담기지 않아서 실행시 undefined가 나온다.

위처럼 promise를 쓸경우 콜백함수로만 비동기적 실행을 했을때 보다 조금은 가독성이 올라간다.