[JS] async, await(1) Promise.race

 

 

❗️ Promise를 이용하지 않아도 좀 더 간단하게 비동기를 작성할 수 있는 방법!

function 앞에 async를 쓰면 Promise를 쓰지 않아도 자동적으로 함수 안 코드들이 Promise로 바뀐다.

// function fetchUser() {
//   return new Promise((resolve, reject) => {
//     // do network reqeust in 10 secs...
//     resolve(`aotoyae`);
//   });
// }

async function fetchUser() {
  // do network reqeust in 10 secs...
  return `aotoyae`;
}

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

// 2. await
// 비동기 코드이지만 동기적 코드를 쓴 것 처럼!
function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function getMelon() {
  await delay(2000);
  return `🍈`;
}

async function getLemon() {
  await delay(1000);
  return `🍋`;
}

async function pickFruits() {
  const melonPromise = getMelon();
  const lemonPromise = getLemon();
  // >> getMelon, getLemon이 동시에 실행된다
  const melon = await melonPromise;
  const lemon = await lemonPromise;
  return `${melon} + ${lemon}`;
}

pickFruits().then(console.log); // `🍈 + 🍋`

// 3. useful Promise APIs
// Promise배열을 전달하게 되면 모든 Promise들이 병렬적으로 다 받을 때까지 모아주는 기능?
function pickAllFruits() {
  return Promise.all([getMelon(), getLemon()]).then((fruits) =>
    fruits.join(` + `)
  );
}

pickAllFruits().then(console.log); // `🍈 + 🍋`

// + race
// 배열에 전달된 Promise 중에서 가장 먼저 값을 return 하는 애만 전달됨
function pickOnlyOne() {
  return Promise.race([getMelon(), getLemon()]);
}

pickOnlyOne().then(console.log); // `🍋`

 

 

 

🔗 https://youtu.be/aoQSOZfz3vQ?si=1EIuEXtCxS2MvKoJ