본문 바로가기
JavaScript 문법 시리즈

[JavaScript 문법] 24일차: 프로미스 고급

by cogito21_js 2024. 8. 24.
반응형

프로미스 체이닝

프로미스 체이닝(Promise Chaining)은 여러 프로미스를 순차적으로 실행하는 방법입니다. 각 then 메서드는 항상 새로운 프로미스를 반환하므로, 여러 then 메서드를 연결하여 사용할 수 있습니다. 이를 통해 비동기 작업을 순차적으로 처리할 수 있습니다.

예제

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('1단계 완료');
  }, 1000);
});

promise
  .then((message) => {
    console.log(message); // '1단계 완료' (1초 후 출력)
    return '2단계 완료';
  })
  .then((message) => {
    console.log(message); // '2단계 완료'
    return '3단계 완료';
  })
  .then((message) => {
    console.log(message); // '3단계 완료'
  })
  .catch((error) => {
    console.error(error);
  });

프로미스 체이닝의 에러 처리

프로미스 체이닝에서 에러가 발생하면, 체인의 마지막에 위치한 catch 메서드가 호출됩니다. 이를 통해 체인 내에서 발생하는 모든 에러를 일관성 있게 처리할 수 있습니다.

예제

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('1단계 완료');
  }, 1000);
});

promise
  .then((message) => {
    console.log(message); // '1단계 완료' (1초 후 출력)
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('2단계에서 에러 발생');
      }, 1000);
    });
  })
  .then((message) => {
    console.log(message); // 실행되지 않음
    return '3단계 완료';
  })
  .catch((error) => {
    console.error(error); // '2단계에서 에러 발생'
  });

Promise.all

Promise.all은 여러 개의 프로미스를 병렬로 실행하고, 모든 프로미스가 이행되면 결과를 배열로 반환하는 메서드입니다. 하나의 프로미스라도 거부되면 전체가 거부됩니다.

예제

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 완료');
  }, 1000);
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 완료');
  }, 2000);
});

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // ['Promise 1 완료', 'Promise 2 완료'] (2초 후 출력)
  })
  .catch((error) => {
    console.error(error);
  });

Promise.race

Promise.race는 여러 개의 프로미스를 병렬로 실행하고, 가장 먼저 이행되거나 거부된 프로미스의 결과를 반환하는 메서드입니다.

예제

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 완료');
  }, 1000);
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 완료');
  }, 2000);
});

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // 'Promise 1 완료' (1초 후 출력)
  })
  .catch((error) => {
    console.error(error);
  });

Promise.allSettled

Promise.allSettled는 여러 개의 프로미스를 병렬로 실행하고, 모든 프로미스가 완료될 때까지 기다린 후 각 프로미스의 상태와 결과를 배열로 반환하는 메서드입니다.

예제

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 완료');
  }, 1000);
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise 2 실패');
  }, 2000);
});

Promise.allSettled([promise1, promise2])
  .then((results) => {
    results.forEach((result) => {
      if (result.status === 'fulfilled') {
        console.log('이행:', result.value);
      } else {
        console.error('거부:', result.reason);
      }
    });
  });

결론

프로미스는 비동기 작업을 처리하기 위한 강력한 도구입니다. 이번 글에서는 프로미스 체이닝, Promise.all, Promise.race, Promise.allSettled와 같은 고급 주제에 대해 배웠습니다. 이러한 개념을 이해하고 적절히 활용하면 비동기 작업을 더욱 효율적으로 처리할 수 있습니다. 다음 글에서는 async/await에 대해 알아보겠습니다.

다음 글에서 만나요!

 

반응형