이번에는 JavaScript나 TypeScript에서 비동기 처리를 위한 Promise와 async/await의 관계에 대해 알아보겠습니다.

Promise란?

먼저 Promise는 비동기 작업의 결과를 나타내는 JavaScript 객체로, 성공 또는 실패와 같은 상태를 나타냅니다. Promise는 주로 서버에서 데이터를 받아오거나 파일을 읽어오는 등의 비동기 작업에서 사용됩니다.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });
};

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

위의 예제에서 fetchData 함수는 Promise를 리턴하고 있으며, then과 catch를 통해 비동기 작업의 성공과 실패를 처리하고 있습니다.

async/await란?

async/await는 Promise를 더 쉽게 다룰 수 있게 하는 기능입니다. async 함수는 항상 Promise를 반환하고, await는 Promise가 settled 상태가 될 때까지 기다린 후 결과를 반환합니다.

const fetchData = async () => {
  const data = await new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });

  console.log(data);
};

fetchData();

async/await와 Promise의 관계

async/await는 Promise를 래핑한 형태이므로, async/await는 기본적으로 Promise를 사용합니다. 즉, async/await는 Promise를 더 쉽게 사용할 수 있도록 해주는 문법적인 기능이라고 볼 수 있습니다.

그러므로, async/await와 Promise는 서로 보완적으로 사용되며, 코드의 가독성과 유지보수를 더 좋게 만들어줍니다. 따라서 async/await를 통해 비동기 작업을 처리하는 것이 권장됩니다.

지금까지 JavaScript나 TypeScript에서 async/await와 Promise의 관계에 대해 알아보았습니다. async/await를 사용하여 비동기 작업을 보다 편리하게 처리할 수 있으니, 많은 활용 부탁드립니다.