async & await

1. async

아래 이전에 사용하던 Promise 함수가 있다

function fetchUser(){
	return new Promise((resolve, reject)=>{
		// do network request in 10 secs....
		resolve('Kim');
	});
}

const user = fetchUser();
user.then(console.log); //'Kim' 출력

위의 함수를 async를 사용하여 더 간결하게 바꿀 수 있다.

async function fetchUser(){
		// do network request in 10 secs....
	return'Kim';
}

const user = fetchUser();
user.then(console.log); // 동일하게 'Kim' 출력

2. await

await 함수를 이용해서 잠시 대기를하게 할 수 있다

function delay(ms){
	return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple(){
	await delay(2000);
	return '사과';
}
async function getBanana(){
	await delay(1000);	//1초가 되서 delay가 될때까지 기다린다
	return'바나나';
}

function pickFruits(){
	return getApple()
	.then(apple =>{
		return getBanana().then(banana=>`${apple}+${banana}`);
	});
} 

위와 같이 promise도 여러번 사용하게 되면 콜백 지옥이 될 수 있다. 따라서 await를 사용하여 아래 처럼 할 수 있다.

async function pickFruits(){
	const apple = await getApple();	// 이렇게 하면 사과를 1초 기다리고 바나나를 1초 기다려서 2초를 기다리게 된다.
	const banana = await getBanana();
	return `${apple} + ${banana}`;
}

pickFruits().then(console.log); // '사과' + '바나나' 출력

하지만 위처럼 하게되면 순차적으로 실행이되어 apple을 생성하고 banana를 생성하게 된다. 병렬적으로 진행을 해야하기 때문에 아래 처럼 진행 할 수 있다.

async function pickFruits(){	//병렬로 동시에 실행한다
	const applePro = getApple();	// promise를 생성하면 바로 실행되기때문에 그것을 이용하여 선언하여 생성후 아래에 사용
	const bananaPro = getBanana();
	const apple = await applePro;	
	const banana = await bananaPro;
	return `${apple} + ${banana}`;
}

pickFruits().then(console.log); // 동일하게 '사과' + '바나나' 출력

promise를 선언하여 생성해 놓고 값을 받아서 바로 출력하게하면 된다.

병렬화시 이용하는 API

병렬화 진행시 위의 코드처럼 하드코딩을 하지 않고 아래 처럼 all 을 사용하여 출력할 수 있다.

function pickAllFruits(){
	 return Promise.all([getApple(),getBanana()]).then(fruits=>fruits.join('+'));
 }

pickAllFruits().then(console.log); // join으로 인해 '사과'+'바나나' 출력

##### 또는 먼저 실행되는 함수부터 출력을 하도록 설정 할 수 있다 (race 사용)

 function pickOnlyOne(){
	return Promise.race([getApple(),getBanana()]); //먼저 호출된 함수를 return한다
}

pickOnlyOne().then(console.log);