JavaScript에서의 비동기 처리 - async/await

async와 await는 JavaScript에서 비동기 코드를 더 쉽게 다룰 수 있게 해주는 키워드다. 주로 Promise 기반의 비동기 작업을 보다 간결하고 동기적으로 보이게 작성할 수 있도록 도와준다.

async와 await는 ECMAScript 2017(ES8)에서 도입되었다.

 

 

1. async 

async 함수는 비동기 작업을 수행하는 함수를 선언할 때 사용되며, 항상 Promise를 반환한다. 이 함수가 호출되면, 그 결과로 해결되는 Promise 객체를 얻게 된다.

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

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

 

 

 

2. await 

await는 async 함수 내에서만 사용할 수 있다. await 뒤에 오는 표현식은 일반적으로 Promise 객체이며, 해당 Promise가 완료될 때까지 async 함수의 실행을 일시 중지한다.

주로 비동기 작업이 완료되고 그 결과를 받아올 때 사용된다.

async function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data Fetched!');
    }, 1000);
  });
}

async function fetchDataAndLog() {
  const data = await fetchData();
  console.log(data); // 1초 후 출력: Data Fetched!
}

fetchDataAndLog();

 

await를 사용하면 코드가 비동기적인 동작을 수행하지만 마치 동기적으로 작성된 것처럼 보일 수 있다.

콜백 함수나 .then() 체인을 사용하는 것보다 가독성이 좋아진다.

 

 

728x90

 

3. async/await 활용

 

1) API 호출

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

fetchData();

fetch API를 사용하여 외부 API에서 데이터를 가져오는 비동기 함수를 작성할 수 있다.

 

 

2) 파일 읽기

const fs = require('fs').promises;

async function readFileContent(filePath) {
  try {
    const content = await fs.readFile(filePath, 'utf-8');
    console.log(content);
  } catch (error) {
    console.error('Error reading file:', error);
  }
}

readFileContent('example.txt');

 

파일 시스템 모듈을 사용하여 파일을 비동기적으로 읽는 함수이다. 

파일 시스템 모듈은 Node.js에서 제공하는 모듈로, require('fs')는 Node.js의 내장 모듈인 파일 시스템 모듈을 가져오는 것이며, .promises는 해당 모듈의 Promise 기반 API를 사용하겠다는 의미이다.

Node.js의 내장 모듈인 fs를 사용하기 위해서는 Node.js 환경이 필요하다.

 

 

3) 동시에 여러 작업 수행

async function fetchDataFromMultipleSources() {
  try {
    const [data1, data2, data3] = await Promise.all([
      fetchDataFromSource1(),
      fetchDataFromSource2(),
      fetchDataFromSource3(),
    ]);
    console.log(data1, data2, data3);
  } catch (error) {
    console.error('Error fetching data from multiple sources:', error);
  }
}

fetchDataFromMultipleSources();

 

여러 소스에서 동시에 데이터를 가져오는 경우 Promise.all과 함께 사용할 수 있다.

 

 

4) 비동기적 반복적 작업

async function processItems(items) {
  for (const item of items) {
    await processItem(item);
  }
  console.log('All items processed');
}

async function processItem(item) {
  // 비동기적인 작업 수행
  console.log('Processed item:', item);
}

const items = [1, 2, 3, 4, 5];
processItems(items);

 

배열의 각 항목을 비동기적으로 처리하는 함수를 작성할 수 있다.

 

 

5) Error Handling with async/await

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5;
      if (success) {
        resolve('Data Fetched!');
      } else {
        reject('Error Fetching Data!');
      }
    }, 1000);
  });
}

async function fetchDataAndLog() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchDataAndLog();

async 함수 내에서 발생한 오류는 일반적인 try...catch 문을 사용하여 처리할 수 있다.
fetchData 함수에서 에러가 발생하면 catch 블록으로 이동하여 에러를 처리한다.