Async/Await in JavaScript: 비동기 코드를 간결하게 작성하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

JavaScript 개발자, 특히 비동기 프로그래밍을 다루는 초보자 및 중급자

핵심 요약

• async 함수는 항상 Promise를 반환하며, async 키워드로 선언
• await 키워드는 Promise가 해결되거나 거부될 때까지 코드 실행을 일시 중단
• try-catch 블록으로 에러 처리를 간결하게 관리 가능
• Promise.all()으로 병렬 작업 수행, await 과도한 사용은 비동기 작업의 직렬화를 유발

섹션별 세부 요약

1. Async Functions

• async 함수는 항상 Promise를 반환, 값 반환 시 Promise.resolve()로 감싸
• 예: async function foo() { return 1; } → foo().then(value => console.log(value))
• 에러 발생 시 Promise.reject()로 처리

1. Await

• await는 async 함수 내부에서만 사용 가능
• 예: await fetch('url') → Promise가 해결될 때까지 실행 일시 중단
• 비동기 코드를 동기적 스타일로 작성 가능

1. Execution Flow

• await 전 코드는 동기적으로 실행, 이후 코드는 비동기적으로 실행
• 예:

```javascript

async function foo() {

console.log('Start');

await Promise.resolve();

console.log('End');

}

foo();

console.log('After foo');

// 출력: Start → After foo → End

```

1. Error Handling

• .catch()보다 try-catch로 에러 처리가 간결
• 예:

```javascript

try {

const data = await fetch('url');

} catch (error) {

console.error('Fetch error:', error);

}

```

1. Promise.all() 사용

• 병렬 작업 실행: await Promise.all([fetch(url1), fetch(url2)])
• 직렬 실행 시 await 연속 사용, 병렬 실행 시 Promise.all() 사용

1. Best Practices

• await는 순차적 실행이 필요한 작업에만 사용
• Promise.all()으로 병렬 작업 최적화
• try-catch로 모든 비동기 작업의 예외 처리 강제

결론

Async/Await은 비동기 코드를 직관적이고 유지보수가 쉬운 방식으로 작성할 수 있도록 도와줍니다. try-catch로 에러를 체계적으로 처리하고, Promise.all()을 활용해 병렬 작업을 최적화하며, await의 과도한 사용은 피해야 합니다.