자바스크립트 async/await를 이용한 데이터 가공

10 Sep 2023

javascript

자바스크립트는 비동기 처리를 위해 콜백 함수나 Promise를 사용하는 것이 일반적입니다. 그러나 최근에 도입된 async/await는 비동기 코드를 작성하고 읽기 쉽게 만드는 강력한 기능입니다. 이번 글에서는 async/await를 사용하여 자바스크립트에서 데이터를 가공하는 방법을 알아보겠습니다.

async/await란?

async/await는 자바스크립트의 비동기 프로그래밍 패턴 중 하나입니다. 이 패턴은 비동기 코드를 동기식으로 작성하는 것처럼 보이도록 도와줍니다. async 키워드로 정의된 함수 내에서 await 키워드를 사용하면 비동기 작업의 완료를 기다릴 수 있습니다.

async 함수 정의하기

async 키워드로 함수를 정의하면 해당 함수는 항상 Promise를 반환합니다. 반환되는 Promise는 async 함수 내부에서 명시한 값을 resolve합니다.

async function fetchData() {
  return 'Data';
}

fetchData().then(data => {
  console.log(data); // 출력: 'Data'
});

await 키워드로 비동기 작업 기다리기

await 키워드는 async 함수 안에서만 사용할 수 있습니다. await 뒤에는 Promise를 반환하는 비동기 함수가 와야 합니다. await 키워드를 사용하면 해당 비동기 작업이 완료될 때까지 함수가 일시 중지됩니다.

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => resolve('Data'), 2000);
  });
}

async function processData() {
  const data = await fetchData();
  console.log(data); // 출력: 'Data'
}

processData();

async/await 체이닝

async/await를 사용하면 여러 비동기 작업을 순차적으로 실행할 수 있습니다. await 키워드 앞에는 Promise가 완료될 때까지 기다려야 합니다.

function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => resolve('User Data'), 2000);
  });
}

function fetchOrders() {
  return new Promise(resolve => {
    setTimeout(() => resolve('Order Data'), 2000);
  });
}

async function processData() {
  const userData = await fetchUserData();
  console.log(userData); // 출력: 'User Data'

  const orderData = await fetchOrders();
  console.log(orderData); // 출력: 'Order Data'
}

processData();

오류 처리하기

async/await를 사용할 때 오류 처리는 try/catch 블록으로 할 수 있습니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject('Error'), 2000);
  });
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.log(error); // 출력: 'Error'
  }
}

processData();

결론

async/await는 자바스크립트에서 비동기 코드를 작성하는 간편하고 깔끔한 방법입니다. async 함수를 정의하고 await 키워드를 사용하여 비동기 작업을 처리할 수 있습니다. 또한, 체이닝을 통해 여러 비동기 작업을 순차적으로 실행할 수 있고, try/catch 블록을 사용하여 오류 처리를 할 수 있습니다. async/await를 이용하면 데이터 가공과 관련된 비동기 작업을 보다 쉽고 명확하게 처리할 수 있습니다.