async & await

AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 

  async function name([param[, param[, ... param]]]) {
        statements
    }

→ Promise의 단점을 보완해주는 비동기 처리 방식



async

  • 함수 선언 시 함수 앞에 async
  • promise 객체 반환


awiat

  • promise 객체 앞에 await
  • promise가 완료될 때까지 대기
  • async 함수 내부에서만 사용 가능



사용

await 키워드를 붙인 비동기 작업이 완료될 때까지 대기했다가 다음 작업을 수행한다. 

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function example() {
    console.log('Task 1');
    await delay(3000);
    console.log('Task 2');
}

example();

async & await 사용 예시




Promise VS async/await

Promise

promise hell 예시 코드 

getPost(postNum)
  .then(postId => {
    console.log('Post:', postId)
    return getComments(postId)
  })
  .then(result => console.log('Comments:', result))
  .catch(error => console.log(error));

→ promise 체이닝으로 인한 .then() 지옥의 가능성 (가독성 저하)
→ .catch()문을 통해 에러 핸들링


async/await

async function getResult() {
	try {
    const postId_result = await getPost(postNum);
    const comments_result = await getComments(postId_result);
    console.log("Post:", postId_result, "Comments:", comments_result);
	} catch (error) {
		console.log(error);
}
  
getResult();

→ .then() 중첩 없이 간결하게 표현 가능
→ try-catch()문을 통해 에러 핸들링 (에러 발생 위치 알기 쉬움)
→ 비동기 작업 흐름을 명확하게 보여줌

try-catch

try {
  // 예외가 발생할 수 있는 코드
  const result = exampleFunction();
  console.log(result);
} catch (error) {
  // 오류 처리를 위한 코드
  console.error('오류가 발생했습니다:', error.message);
}
  1. try 블록 실행
  2. try 블록 내에서 예외/오류가 발생 → 해당 블록 내 코드 실행 즉시 중단, 해당 catch 블록으로 이동 (try 블록 내 오류가 없을 경우 catch 블록 건너뛰고 계속 진행)
  3. catch 블록 내의 코드 실행
  4. catch 블록 실행 후, 이후 프로그램 계속 진행



references
👉 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-async-await