[JS] async/await

async/await는 JavaScript에서 비동기 작업을 처리하는 데 사용되는 구문입니다. 이것은 Promise 기반 코드를 보다 간결하고 직관적으로 작성할 수 있게 도와줍니다. 먼저 Promise와 관련된 기본 개념을 이해한 후, async/await를 사용하는 방법을 설명하겠습니다.

 

1. Promise 복습

 

JavaScript의 Promise는 비동기 작업의 성공 또는 실패를 나타내는 객체입니다. 이를 사용하면 비동기 작업의 완료 시점에 대한 처리를 할 수 있습니다.

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업
  const success = true;

  if (success) {
    resolve('작업 성공');
  } else {
    reject('작업 실패');
  }
});

myPromise
  .then(result => {
    console.log(result);  // 작업 성공
  })
  .catch(error => {
    console.log(error);  // 작업 실패
  });

 

2. async/await 개념

 

async/await는 위와 같은 Promise 기반 코드를 더 직관적으로 작성할 수 있게 해주는 기능입니다. async 키워드는 함수 앞에 붙여서 그 함수를 비동기 함수로 만들며, await 키워드는 Promise가 해결될 때까지 기다린 후 그 값을 반환합니다.

 

• async 함수: 함수 앞에 async 키워드를 붙이면, 그 함수는 항상 Promise를 반환합니다. 비동기 작업에서 값을 반환하면 자동으로 resolve되고, 예외가 발생하면 자동으로 reject됩니다.

• await 키워드: await는 Promise가 해결될 때까지 기다립니다. await는 반드시 async 함수 안에서만 사용할 수 있습니다.

 

3. 사용법

 

기본 예시

async function fetchData() {
  const result = await fetch('https://api.example.com/data');
  const data = await result.json();
  console.log(data);
}

fetchData();

위 코드는 fetch 함수를 사용해 데이터를 비동기로 가져오는 작업을 합니다. await는 fetch가 완료될 때까지 기다렸다가, 그 결과를 받아 다음 작업을 수행합니다.

 

에러 처리

 

비동기 작업에서 오류가 발생할 수 있으므로, try...catch 구문을 사용해 오류를 처리하는 것이 일반적입니다.

async function fetchData() {
  try {
    const result = await fetch('https://api.example.com/data');
    const data = await result.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

 

 

4. async/await의 장점

 

• 코드 가독성: async/await는 코드가 동기 방식으로 작성된 것처럼 보여 가독성이 높아집니다.

• 에러 처리의 간소화: try...catch 구문을 사용하면 기존의 then, catch 체인보다 예외 처리 방식이 명확해집니다.

• 프로미스 체인 단순화: 여러 개의 Promise를 사용하는 경우, then을 중첩하지 않고 await로 순차적으로 비동기 작업을 처리할 수 있습니다.

 

프로미스 체인 예시:

fetchData()
  .then(result => {
    return processData(result);
  })
  .then(finalResult => {
    console.log(finalResult);
  })
  .catch(error => {
    console.error(error);
  });

위의 코드를 async/await로 변환하면 다음과 같이 단순화됩니다:

async function handleData() {
  try {
    const result = await fetchData();
    const processedResult = await processData(result);
    console.log(processedResult);
  } catch (error) {
    console.error(error);
  }
}

handleData();

 

 

5. 병렬 실행

 

await는 기본적으로 Promise를 직렬적으로 실행하게 만드는데, 여러 개의 비동기 작업을 병렬로 실행하고 싶다면 Promise.all()을 사용할 수 있습니다.

async function fetchMultipleData() {
  const [data1, data2] = await Promise.all([
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2')
  ]);

  const result1 = await data1.json();
  const result2 = await data2.json();

  console.log(result1, result2);
}

fetchMultipleData();

위 코드는 두 개의 API 요청을 병렬로 실행하여 효율적으로 데이터를 가져옵니다.

 

6. 결론

 

async/await는 복잡한 비동기 처리를 동기 코드처럼 작성할 수 있도록 도와주는 매우 유용한 기능입니다. 이를 사용하면 비동기 작업의 흐름을 더 직관적으로 제어할 수 있고, 에러 처리를 깔끔하게 할 수 있습니다. Promise를 기반으로 동작하므로 Promise의 기본 개념을 이해하는 것이 중요합니다.