TIL JavaScript from Dream Coding(9)

async & await

Clear style of using promise :)

1. async

async function fetchUser() {
  // do network request in 10 secs...
  resolve('amanda');
}
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);
  throw 'error';
  return '🍎';
}

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

// like callback hell
function pickFruits() {
  return getApple().then(apple => {
      return getBanana().then(banana => `${apple} + ${banana}`);
  });
}
pickFruits().then(console.log);

// using async
async function pickFruits() {
  const applePromise = getApple();
  const bananaPromise = getBanana();
  // 병렬적으로 동시에 기능을 수행하게 하기
  
  const apple = await applePromise();
  const banana = await bananaPromise();
  return `${apple} + ${banana}`;
}
pickFruits().then(console.log);

---

3. useful Promise APIs

// 1
// all : 프로미스 배열을 전달하게 되면 모든 프로미스들이 병렬적으로 다 받을 때 까지 모아준다.
function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then(fruits => fruits.join(' + '));
};
pickAllFruits().then(console.log);

// 2
// race : 배열에 전달된 프로미스 중에서 가장 먼저 값을 리턴하는 아이만 값이 전달 됨
function pickOnlyOne() {
  return Promise.race([getApple(), getBanana()])
}
pickOnlyOne().then(console.log);