자바스크립트 비동기 처리 async/await

[JS]비동기 처리1-Callback-자바스크립트/Javascript

[JS]비동기 처리2-Promise-자바스크립트/Javascript

 

🤓 Promise를 async/await으로 변경

'비동기 처리 Callback' 글에서 Callback을 알아봤고,
이 방법을 Promise 방법으로 바꾸는 방법은 '비동기 처리 Promise'에서 다뤘다.

각 글에서 다룬 예제를 최종적으로 async/await으로 바꾸는 코드는 아래와 같다.

function sleep() {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve();
		}, Math.random() * 100);
	});
}

async function func1() {
	await sleep();
	console.log('1');
}

async function func2() {
	await sleep();
	console.log('2');
};

async function func3() {
	await sleep();
	console.log('3');
}

async function excuteFuncs() {
	await func1();
	await func2();
	await func3();
}

excuteFuncs();

 

😏 async - Promise를 쉽게

function 앞에 aync를 사용하게 되면 function이 Promise 사용하는 것과 동일하도록 쉽게 변경해준다.

async function funcAsync() {
	return 'async 123';
}
function funcPromise() {
	return new Promise(resolve => {
		resolve('promise 123');
	});
}
funcAsync().then(console.log);
funcPromise().then(console.log);

 

😮 await/async 비동기 처리 3 - 기다려

await은 async(Promise)로 선언된 함수가 return(resolve)될 때 까지 기다려준다.

!await은 async로 정의된 함수 안에서만 사용가능하다!

function sleep(sec) {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve();
		}, sec * 1000);
	});
}
async function funcAsync(value) {
	await sleep(1);
	console.log(value);
}
async function excuteFuncs() {
	await funcAsync('1');
	await funcAsync('2');
	console.log('모두 끝났나?');
}
excuteFuncs();

 

🤓 심화 병렬 처리

위의 await 예제에서는 1초 후 '1'을 출력, 그 다음 1초 후 '2'를 출력하고 최종적으로 '모두 끝났나'가 호출 된다. 그러면 최종적으로 약 2초후 작업이 완료가 된다.

하지만 funcAsync가 각각 의존성이 없다면 2초가 아닌 약 1초 후 완료가 되어야할 것이다.

await으로 하나씩 기다렸다가 다음 코드를 실행하는게 아니라 각각 병렬적으로 실행을 하고 모두 완료가 되었을때, 그 다음 동작을 하기 위해서 Promise.all을 사용한다. 아래와 같이 코드를 작성하게 되면 약 1초 후 '모두 끝났나?'가 호출되는것을 볼 수 있다.

function sleep(sec) {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve();
		}, sec * 1000);
	});
}
async function funcAsync(value) {
	await sleep(1);
	console.log(value);
}
function excuteFuncs() {
	return Promise.all(
		[funcAsync('1'), funcAsync('2')]);
}
excuteFuncs().then(()=>{
	console.log('모두 끝났나?');
});

 

Promise all에 대한 자세한 내용은 아래 글에서 확인해보세요.

[Javascript] 배열 연산 동기화(Promise All)