비동기 처리 Promise, all

오늘은 최근에 개발을 하면서 사용한 Javascript Promise 사용하는 방법에 대해 알아보려고 한다.

Promise 에 대한 정의보다는 간단한 사용법을 코드를 통해 간단히 정리를 남기려고 한다

요구사항

1.  firstTask, secondTask, thirdTask 는 setTimout 으로 구현된 비동기 함수이다.

2.  firstTask, secondTask, thirdTask. 순서로 함수가 동작해야 한다.

다음과 같은 요구사항을 구현을 하려면 아래와 같이 구현할 수 있다. firstTask() --> secondTask() --> thirdTask() 를 순차적으로 호출하는 callback 으로 

구현할 수 있다. 지금은 간단한 출력 메소드이고, 숫자도 적지만, 복잡하고 많다면 ... 정말 말그대로 지옥일 수 있다.

function firstTask(callback) {
	setTimeout(() => {
		callback('First task is finished');
	}, 1000);
}

function secondTask(callback) {
	setTimeout(() => {
		callback('Second task is finished');
	}, 1500);
}

function thirdTask(callback) {
	setTimeout(() => {
		callback('Third task is finished');
	}, 2000);
}

firstTask((result) => {
	console.log(result);

	secondTask((result) => {
		console.log(result);

		thirdTask((result) => {
			console.log(result);
		})
	})
});

Promise를 이용하면 아래 코드를 좀더 명시적으로 구현이 가능하다. 

then()을 이용해서 체인형식으로 순차적으로 처리가 가능하다. 체인형식과 then 이라는 이름덕분에 코드의 순서를 좀 더 명확하게 이해가 가능하다.

여기서 resolve는 정상적으로 수행했을 때 동작하는 함수이고, reject는 비정상적으로 종료되었을 때 동작하는 함수이다.

('First task is finished' == 'result', resoleve == console.log(result))

그리고 중요한 것은 체인형식을 할 때, 리턴으로 Promise를 반환해야 한다는 것이다. 그래야 리턴되는 Promise를 다음 then() 메소드에서 처리가 가능하다.

function firstTask() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('First task is finished');
		}, 1000);
	});
}

function secondTask(callback) {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('Second task is finished');
		}, 1500);
	});
}

function thirdTask(callback) {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('Third task is finished');
		}, 2000);
	});
}

firstTask().then((result) => {
	console.log(result);
	return secondTask();
}).then((result) => {
	console.log(result);
	return thirdTask();
}).then((result) => {
	console.log(result);
});

이번에는 다른 요구사항을 통해 Promise 다른 기능을 살펴보려고 한다.

요구사항

1. firstTask, secondTask, lastTask 는 setTimout 으로 구현된 비동기 함수이다.

2. firstTask, secondTask 모두 종료되면, lastTask 가 수행해야 한다.

이럴 경우는 Promise.all 사용하면 된다.

Promise.all 의 파라미터로 Promise 배열 (한번에 모두 처리해야할 대상) 전달해주면 된다. 정말 간단하다.

function firstTask() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('First task is finished');
		}, 1000);
	});
}

function secondTask() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('Second task is finished');
		}, 1500);
	});
}

function lastTask() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('Last task is finished');
		}, 2000);
	});
}

let tasks = [firstTask(), secondTask()];

Promise.all(tasks).then((results) => {
	console.log(results[0]);
	console.log(results[1]);

	return lastTask();
}).then((result) => {
	console.log(result);
});

오늘은 비동기를 처리하는데 많은 도움을 주는 Promise를 사용법 위주로 정리를 했다. 

그리고 바로 이어서 다음 포스팅에서는 오늘 자주 사용했던 setTimeout 에 대해서 간단히 정리를 하겠다!