자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs

자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs

async & await 
clear style of using promise :)


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

코드 블럭이 자동으로 promise로 바뀜
async function fetchUser() {
	// do network request in 10secs...
	return 'ellie'
}


const user = fetchUser();
user.then(console.log);
console.log(user);

2. await
function delay(ms) {
	return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
	await delay(3000);
	return 'apple';
}

async function getBanana() {
	await delay(3000);
	return 'banana';
}

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

pickFruits().then(console.log);


function pickFruits() {
	try {
		const apple = await getApple();
		const banana = await getBanana();
	} catch() {
		
	}
	return `${apple} + ${banana}`;
}

두가지가 연관이 없을때 병렬적으로 사용가능
function pickFruits() {
	const BananPromise = getBanana();
	const applPromise = getApple();
	const apple = await applPromise;
	const banana = await BananPromise;
	return `${apple} + ${banana}`;
}

pickFruits().then(console.log);


3. useful Promise APIs
function pickAllFruits() {
	return Promise.all([getApple(), getBanana()])
	.then(fruits => fuits.join(' + '));
}
pickAllFruits().then(console.log);


function pickOnlyOne() {
	return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log);

https://www.youtube.com/watch?v=aoQSOZfz3vQ