[JavaScript] 자바스크립트 | 비동기의 꽃 JavaScript async 와 await | 유용한 Promise APIs

// async & await
// clear style of using promise :) 
// (비동기 처리를 더 명확하고 간결하게 작성할 수 있는 방법)

// 1. async
async function fetchUser() {
  // do network reqeust in 10 secs....
  // (네트워크 요청이 10초 걸린다고 가정)
  return 'ellie';
}

const user = fetchUser(); 
user.then(console.log); 
console.log(user); 
// (fetchUser는 비동기 함수이므로 user는 Promise 객체이며, then으로 결과를 처리)

// 2. await ✨
// (await 키워드를 사용해 비동기 흐름을 동기식처럼 작성)

// delay 함수는 ms 만큼 기다리는 Promise를 반환
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
  await delay(2000); 
  // (2초 대기 후 결과 반환)
  return '🍎';
}

async function getBanana() {
  await delay(1000); 
  // (1초 대기 후 결과 반환)
  return '🍌';
}

async function pickFruits() {
  const applePromise = getApple(); 
  const bananaPromise = getBanana(); 
  // (각 과일을 병렬로 가져오기 시작)
  const apple = await applePromise; 
  const banana = await bananaPromise; 
  // (병렬로 요청하되, 개별적으로 결과를 기다림)
  return `${apple} + ${banana}`;
}

pickFruits().then(console.log);
// (2초 뒤 🍎 + 🍌 출력)

// 3. useful APIs ✨
// (Promise 관련 유용한 API들)

// Promise.all: 모든 Promise가 완료될 때까지 기다림
function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then(fruits =>
    fruits.join(' + ')
  );
}
pickAllFruits().then(console.log); 
// (모든 과일을 병렬로 수확 후, 조합해서 출력)

// Promise.race: 가장 먼저 완료된 Promise 결과만 사용
function pickOnlyOne() {
  return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log); 
// (가장 빨리 끝난 과일 하나만 출력, 여기선 🍌)

 

async	함수가 Promise를 반환하게 만드는 키워드
await	Promise가 해결될 때까지 기다림, async 함수 안에서만 사용 가능
Promise.all	여러 비동기 작업을 동시에 실행하고, 모두 끝날 때까지 기다림
Promise.race	여러 작업 중 가장 먼저 끝난 것 하나만 반환

async 키워드의 역할

• async 키워드를 붙이면 이 함수는 자동으로 Promise를 반환함
• 여기서 return 'ellie'는 Promise.resolve('ellie')로 감싸져서 반환됨

await 키워드의 사용법

delay(ms)는 특정 시간(ms)만큼 기다린 뒤 끝나는 Promise를 반환합니다.

• await delay()는 1초 또는 2초 동안 기다렸다가 다음 줄로 넘어감
• await은 꼭 async 함수 안에서만 사용 가능

🧺 두 과일을 동시에 수확

1. getApple()과 getBanana()를 동시에 시작
2. banana는 1초 뒤 완료, apple은 2초 뒤 완료
3. 최종 결과는 2초 뒤에 '🍎 + 🍌' 출력

 

유용한 Promise API들 ✨

Promise.all: 병렬로 다 끝날 때까지 기다리기

• Promise.all()은 모든 작업이 끝나야 다음으로 넘어감
• 배열로 여러 Promise 전달
• 결과도 배열로 받음

Promise.race: 가장 빠른 것만 가져오기

• Promise.race()는 제일 빨리 끝난 Promise만 반환
• 여기선 getBanana()가 1초로 더 빨라서 🍌 반환

🧠 async/await 흐름 요약도

[ async function 실행 ]
        ↓
[ 내부에서 await 만나면 ]
        ↓
[ Promise 결과 올 때까지 기다림 ]
        ↓
[ 다음 줄 실행 ]

→ 비동기인데도 마치 동기처럼 코드가 위에서 아래로 "쭉" 읽힘

정리

개념	설명	예시
async	함수가 항상 Promise를 반환하게 만듦	async function fn() {}
await	Promise가 끝날 때까지 기다렸다가 다음 줄 실행	const data = await fetch()
Promise.all	여러 비동기 작업 병렬 실행 → 결과를 배열로	Promise.all([a(), b()])
Promise.race	가장 빠른 Promise 결과만 사용	Promise.race([a(), b()])

• async/await은 Promise를 더 읽기 쉽게 만드는 문법이에요
• 코드가 "동기처럼" 보이게 짤 수 있어서 실무에서 많이 써요
• Promise.all과 race로 여러 작업을 효율적으로 병렬 처리할 수도 있어요