자바스크립트 Promise 객체 이용하여 비동기 작업하기

안녕하세요 오늘은 자바스크립트에서 비동기 작업을 다루는 데 가장 효과적인 도구 중 하나인 Promise 객체에 대해 알아보겠습니다. Promise는 비동기 작업의 완료 또는 실패에 대한 결과를 다룰 수 있게되며, 가독성 있는 코드를 작성하고 에러 처리를 개선하는 데 도움이 됩니다.

자바스크립트에서 Promise 란 무엇일까요?

Promise는 세 가지 상태를 가지고 있습니다: 대기(pending), 이행(fulfilled), 거부(rejected). 비동기 작업이 완료되면 Promise는 성공 또는 실패와 함께 해당 상태로 전환됩니다.

Promise 생성하기

Promise는 생성자 함수를 통해 만들 수 있습니다. 

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

  if (success) {
    resolve("성공했습니다!");
  } else {
    reject("실패했습니다!");
  }
});

then()과 catch() 메서드

Promise의 then() 메서드는 성공 시, catch() 메서드는 실패 시에 실행됩니다. 메서드를 활용해서 다음과 같이 각각의 상황에 맞게 처리할 수 있습니다.

myPromise
  .then((result) => {
    console.log(result); // 성공했습니다!
  })
  .catch((error) => {
    console.error(error); // 실패했습니다!
  });

Promise 체이닝

여러 개의 비동기 작업을 순차적으로 실행하려면 Promise 체이닝을 사용하는 방법을 사용하면 됩니다.

const asyncTask1 = () => new Promise((resolve) => setTimeout(() => resolve(1), 1000));
const asyncTask2 = (result) => new Promise((resolve) => setTimeout(() => resolve(result + 2), 1000));

asyncTask1()
  .then((result) => asyncTask2(result))
  .then((finalResult) => console.log(finalResult)); // 3

Promise.all()과 Promise.race()

Promise.all()은 여러 Promise를 병렬로 실행하고 모든 작업이 완료되면 결과를 반환합니다. 반면, Promise.race()는 여러 Promise 중 가장 먼저 완료된 작업의 결과만을 반환합니다.

const promise1 = new Promise((resolve) => setTimeout(() => resolve("첫 번째"), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve("두 번째"), 500));

Promise.all([promise1, promise2])
  .then((results) => console.log(results)); // ["첫 번째", "두 번째"]

Promise.race([promise1, promise2])
  .then((result) => console.log(result)); // "두 번째"

async/await와 Promise

async/await은 Promise를 더 편리하게 다룰 수 있는 방법입니다.

const fetchData = async () => {
  try {
    const result = await myPromise;
    console.log(result);
  } catch (error) {
    console.error(error);
  }
};

fetchData();

Promise는 자바스크립트에서 비동기 작업을 더욱 효율적으로 다룰 수 있게 해주는 강력한 도구라는 생각이 듭니다. 프로미스를 활용하여 가독성 좋은 코드를 작성하고, 에러 처리를 보다 쉽게 관리할 수 있습니다. 비동기 프로그래밍에 필수적인 이 도구를 마스터하면 보다 안정적이고 효율적인 웹 개발이 가능할 것입니다. 개발자 분들 혹은 자바스크립트를 공부하시는 분들에게 도움이 되기를 바라며 이만 글을 마치도록 하겠습니다. 감사합니다.

다른 글이 궁금하시다면 다른글도 한번씩 읽어봐주세요.