4.1 키워드 async
JavaScript에서 비동기 함수는 비동기 코드를 동기 코드처럼 쓸 수 있게 해줘. ECMAScript 2017 (ES8)에서 도입된 async와 await 키워드는 프로미스를 다루기 쉽게 해주고 코드를 더 이해하기 쉽게 만들어줘.
주요 개념
함수 선언 앞에 async 키워드를 붙이면 그 함수가 비동기 함수가 돼. 비동기 함수는 항상 프로미스를 반환해, return 문이 없어도 마찬가지야. 함수가 값을 반환하면 그 값이 자동으로 프로미스로 감싸져서 반환돼.
문법:
async function name() {
// 함수 코드
}
예제:
JavaScript
async function greet() {
return 'Hello, world!';
}
greet().then((message) => {
console.log(message); // 출력: Hello, world!
});
4.2 키워드 await
await 키워드는 비동기 함수 안에서 프로미스가 이행될 때까지 실행을 멈추게 해줘. await는 async 키워드로 선언된 함수 안에서만 사용할 수 있어.
문법:
let result = await
promise;
예제:
JavaScript
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function greet() {
await delay(2000);
return 'Hello, world!';
}
async function displayGreeting() {
const message = await greet();
console.log(message); // 출력: Hello, world! 2초 후
}
displayGreeting();
4.3 async와 await의 사용 예제
예제 1: 여러 프로미스를 기다리는 비동기 함수
JavaScript
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const data1 = await fetchData1();
console.log(data1); // 출력: Data 1 (1초 후)
const data2 = await fetchData2();
console.log(data2); // 출력: Data 2 (2초 후)
}
fetchAllData();
예제 2: 비동기 작업의 병렬 실행
여러 비동기 작업을 병렬로 실행하려면 Promise.all()을 await와 함께 사용할 수 있어.
JavaScript
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1); // 출력: Data 1 (2초 후)
console.log(data2); // 출력: Data 2 (2초 후)
}
fetchAllData();
예제 3: try...catch를 사용한 에러 처리
비동기 함수는 try...catch 블록을 사용하여 에러를 처리할 수 있어, 이걸로 코드가 더 읽기 쉬워져.
JavaScript
function fetchDataWithError() {
return new Promise((resolve, reject) => setTimeout(() => reject('Error occurred'), 1000));
}
async function fetchData() {
try {
const data = await fetchDataWithError();
console.log(data);
} catch (error) {
console.error('Error:', error); // 출력: Error: Error occurred (1초 후)
}
}
fetchData();
예제 4: 클래스를 사용하는 async와 await
비동기 함수는 클래스의 메소드 안에서도 사용할 수 있어.
JavaScript
class DataFetcher {
async fetchData() {
const data = await new Promise((resolve) => setTimeout(() => resolve('Fetched Data'), 1000));
return data;
}
}
const fetcher = new DataFetcher();
fetcher.fetchData().then((data) => {
console.log(data); // 출력: Fetched Data (1초 후)
});
예제 5: 비동기 이터레이터
비동기 이터레이터는 비동기로 데이터를 스트리밍하는 데 유용해.
JavaScript
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
}
async function iterateAsyncGenerator() {
for await (let value of asyncGenerator()) {
console.log(value); // 출력: 0, 1, 2 (1초 간격)
}
}
iterateAsyncGenerator();
GO TO FULL VERSION