javascript. Promise API

• async 키워드를 사용하면 반환받는 값은 Promise가 된다.
• fulfil Promise가 반환되기 때문에 반환된 값을 사용하기 위해선 .then() 블럭을 사용해야 한다.

Async/await 는 우리의 코드를 마치 동기식 코드처럼 보이게 한다. 그리고 어떤 면에서는 정말로 동기적으로 행동합니다. 함수 블럭에 여러 개의 await 키워드를 사용하면 Promise가 fulfilled되기 전 까지 다음 await 을 차단해버린다!! >>  Promise.all API 사용! 전달인자로 Promise를 받는데, [배열]로 받는다

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


// 1.async
// function fetchUser(){
//  return new Promise((resolve, reject)=> {
    //do network request in 10 secs......
    // pending, fulfill(완료), reject(실패)
//    resolve('rani');
//  });
// }

async function fetchUser(){ 
  // 함수앞에 async키워드를 붙이면 자동으로 promise로 변환된다!
  return 'rani';
}
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 pickFruits(){
//   return getApple()
//   .then(apple => {
//     return getBanana()
//     .then(banana => `${apple} + ${banana}`);
//   })
// }

// pickFruits().then(console.log);

async function pickFruits(){
  const applePromise = getApple(); 
  const bananaPromise = getBanana();
  // 바로실행된다. apple과 banana를 병렬적으로 1초 후에 가져옴
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple} + ${banana}`;
}

pickFruits().then(console.log);


// 3. useful Promist APIS >> 3번 코드를 더 깔끔하게.
function pickAllFruits(){
  return Promise.all([getApple(), getBanana()])
  .then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log);

// 더 빠른넘을 뽑아오는 api! race
function pickFirstOne(){
  return Promise.race([getApple(), getBanana()]);
}

pickFirstOne().then(console.log);