JavaScript - async and await

async와 await

Promise chaining의 문제점을 보완하기 위해서 사용된다.

const promise = new Promise((resolve, reject) => {
	
});

promise
.then()
.then()
.then();

이 처럼 then, catch, finally 등이 Chaining하여 코드의 가독성이 떨어질 수 있기 때문에 이를 보완하고자 사용한다.

async와 await 사용방법

async를 앞에 선언한느 것 만으로도 Promise를 사용하는 것과 같은 효과를 만들 수 있다.

/*----------0. promise ver----------*/
function fetchUser() {
	return new Promise((resolve, reject) => {
		resolve ('YounHo');    
    });
}

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


/*----------1. async ver----------*/
async function fetchUser(){
	return 'YounHo';
}

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


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

async fuction getApple(){
	await delay(1000);
    return '🍎';
}

async fuction getBanana(){
	await delay(1000);
    return '🍌';
}

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

pickFruits().then(console.log);


/*----------3. Callback 개선버전 ver----------*/
function delay(ms){
	return new Promise(resolve => setTimeout(resolve, ms));
}

async fuction getApple(){
	await delay(1000);
    return '🍎';
}

async fuction getBanana(){
	await delay(1000);
    return '🍌';
}

async function picFruits(){
	
    const apple = await getApple();
    const banana = await getBanana();
    
    return `${apple} + ${banana}`;
}

pickFruits().then(console.log);


/*----------4. Promise를 바로 생성하여 속도 개선버전 ver----------*/
function delay(ms){
	return new Promise(resolve => setTimeout(resolve, ms));
}

async fuction getApple(){
	await delay(1000);
    return '🍎';
}

async fuction getBanana(){
	await delay(1000);
    return '🍌';
}

async function picFruits(){
	//promise를 바로 생성
    const applePromise = getApple();
    const BananaPromise = getBanana();
    
    const apple = await applePromise;
    const banana = await BananaPromise;
    
    return `${apple} + ${banana}`;
}

pickFruits().then(console.log);
// 이 전에는 await 떄문에 각각 실행되어 2초가 걸리지만
// 프로미스를 생성하여 각각 바로 생성되기 때문에 1초로 단축 가능
// 즉, 병렬적으로 코드 작성이 가능하다.


/*----------5. Promise API를 사용하여 더 깔끔하게 ver----------*/
function delay(ms){
	return new Promise(resolve => setTimeout(resolve, ms));
}

async fuction getApple(){
	await delay(1000);
    return '🍎';
}

async fuction getBanana(){
	await delay(1000);
    return '🍌';
}

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

pickAllFruits().then(console.log);

/*----------6. 가장 먼저 리턴되는 과일만 Pick ver----------*/
function delay(ms){
	return new Promise(resolve => setTimeout(resolve, ms));
}

async fuction getApple(){
	await delay(1000);
    return '🍎';
}

async fuction getBanana(){
	await delay(1000);
    return '🍌';
}

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

pickOnlyOne().then(console.log);