[javascript] 비동기 async와 await, promise APIs

1. async

function fetchUser(){
	// 백엔드에서 자료를 가지고 오는 데 10초 정도 걸리는 함수 (가정)
    return 'jiwon';
}

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

// 위 코드를 비동기적 처리를 하지 않으면 사용자 정보를 가져오는데 10초가 소요됨

function fetchUser(){
	return new Promise((resolve, reject) => {
    	// 백엔드에서 자료를 가지고 오는 데 10초 정도 걸리는 함수 (가정)
    	resolve('jiwon');
    });
}

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

// 위 Promise코드를 async를 사용해서 바꾸면?!
async function fetchUser(){
	// 백엔드에서 자료를 가지고 오는 데 10초 정도 걸리는 함수 (가정)
    return 'jiwon';
}

// 결과값은 Promise를 사용한 것과 같음

 

 

 

2. await

async 안에서만 쓸 수 있음

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}');
    });
}

// async와 await 활용
function pickFruits(){
	const apple = await getApple();
    const banana = await getBanana();
    return '${apple} + ${banana}';
}

 

에러 발생시

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

 

병렬적으로 진행 돼야할 때 가능한 코드

// apple과 banana는 데이터를 받아올 때 연관되어 있지 않아서
// 서로 (딜레이 시간을) 기다릴 필요가 없음

function pickFruits(){
	const applePromise = getApple();
    const bananaPromise = getBanana();
	const apple = await applePromise();
    // 만들자마자 코드가 실행됨
    const banana = await bananaPromise();
    return '${apple} + ${banana}';
}

// 1초만에 병렬적으로 실행됨

 

 

3. 유용한 Promise APIs

 

.all

모든 promise들이 병렬적으로 데이터를 다 받을 때까지 모아줌

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

 

.race

promise로 전달된 배열 중 첫번째 과일만 받아오고 싶을 때

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