여씨의 개발이야기

[입문] await과 async 본문

🐾 Programming Lang/🛸 Javascript

[입문] await과 async

yeossi 2022. 3. 11. 18:39

 

// async & await
// clear style of using promise :)

// 1. async
async function fetchUser() { // syntactic sugar : promise 대신 async 한 단어만 넣으면 promise 기능 완!
  // do network reqeust in 10 secs....
  return 'jisun';
}

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(2000);
  return '🍎';
}

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

function getBanana(){
	return delay(3000).then(()=>'🍌');
}

async function pickFruits() {
  const applePromise = getApple();
  const bananaPromise = getBanana(); // 이렇게 각 promise를 await하기 전에 만들어주면 
  const apple = await applePromise; // 이 놈과
  const banana = await bananaPromise; // 이 놈이 병렬적으로 실행하게 됨
  return `${apple} + ${banana}`;
}

pickFruits().then(console.log);

// 3. useful APIs ✨ // 위의 pickFruits 를 좀 더 간단하게!
function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then(fruits => 
		// Promise.all : promise들을 모아서 병렬실행
    fruits.join(' + ') // 결과값을 배열로 받아오니 join을 사용
  );
}
pickAllFruits().then(console.log);

function pickOnlyOne() {
  return Promise.race([getApple(), getBanana()]); 
	// Promise.race : 배열에 전달된 promise중에 빨리 끝난 놈을 가져옴
}

pickOnlyOne().then(console.log);

 

Comments