JavaScript /
자바스크립트 비동기 처리: Promise 사용하기

자바스크립트 비동기 처리: Promise 사용하기

이 글에서는 자바스크립트의 비동기 처리를 위한 Promise에 대해 알아봅니다. Promise의 개념, 생성 방법, 상태 변화, then 메서드를 통한 체이닝, Promise.all 및 Promise.race를 활용한 병렬 처리, 그리고 catch 메서드를 사용한 에러 처리 등을 통해 비동기 작업을 효율적으로 관리하는 방법에 대해서 알아보겠습니다.

▼ 목차

  1. 비동기 처리
  2. 콜백 함수의 한계
  3. Promise 개념 소개
  4. Promise 생성 및 사용 방법
  5. Promise 체이닝
  6. Promise.all, Promise.race
  7. 에러 처리

1. 비동기 처리

비동기 처리는 프로그램의 특정 부분이 실행되는 동안 다른 부분이 동시에 실행되도록 하는 방식입니다. 자바스크립트에서는 일반적으로 타이머, 이벤트 리스너, HTTP 요청 등과 같은 작업을 비동기 처리를 사용하여 처리합니다. 이렇게 함으로써 사용자 인터페이스가 매끄럽게 동작하고 브라우저가 동시에 여러 작업을 처리할 수 있습니다.

2. 콜백 함수의 한계

콜백 함수를 사용하여 비동기 작업을 처리하는 것은 복잡하고 가독성이 떨어질 수 있습니다. 또한 중첩된 콜백 함수는 코드의 복잡성을 증가시키고 유지 보수를 어렵게 만듭니다. (콜백 지옥)

3. Promise 개념 소개

Promise는 비동기 작업을 더 쉽게 다루기 위해 도입된 자바스크립트 객체입니다. Promise는 작업이 완료되었을 때의 결과 값을 나타내거나 작업이 실패한 이유를 전달합니다. Promise는 다음과 같은 세 가지 상태를 가집니다.

  • Pending: 작업이 진행 중인 상태
  • Fulfilled: 작업이 성공적으로 완료된 상태
  • Rejected: 작업이 실패한 상태

4. Promise 생성 및 사용 방법

1. 생성 및 사용 방법

const myPromise = new Promise((resolve, reject) => {
// 비동기 작업 실행
// ...
if (/* 작업 성공 */) {
     resolve(result);
} else {
     reject(error);
}
});

myPromise.then((result) => {
// 성공 시 실행되는 코드
}).catch((error) => {
// 실패 시 실행되는 코드
});


2. 예제 코드

<!DOCTYPE html>
<html>

<head>
     <title>JavaScript Promise Example</title>
</head>

<body>
     <script>
     const myPromise = new Promise((resolve, reject) => {
     // setTimeout을 사용하여 1초 후에 작업을 수행합니다.
     setTimeout(() => {
          const success = true; // 작업 성공 여부를 설정하는 변수
          if (success) {
          resolve('작업이 성공적으로 완료되었습니다.');
          } else {
          reject(new Error('작업 중 오류가 발생했습니다.'));
          }
     }, 1000);
     });

     myPromise.then((result) => {
     console.log(result); // 성공 시 실행되는 코드
     }).catch((error) => {
     console.error(error.message); // 실패 시 실행되는 코드
     });
     </script>
</body>

</html>

5. Promise 체이닝

Promise 체이닝을 사용하여 여러 개의 비동기 작업을 순차적으로 연결할 수 있습니다.


▼ 사용 방법

firstAsyncFunction()
    .then((firstResult) => {
    return secondAsyncFunction(firstResult);
    })
    .then((secondResult) => {
    return thirdAsyncFunction(secondResult);
    })
    .catch((error) => {
    // 에러 처리
    });

6. Promise.all, Promise.race

Promise.all과 Promise.race는 여러 개의 Promise를 한 번에 처리할 수 있는 방법을 제공합니다.

  • Promise.all: 모든 Promise가 성공적으로 완료되면 결과를 배열로 반환합니다. 하나라도 실패하면, 전체가 실패한 것으로 간주합니다.
  • Promise.race: 가장 먼저 완료되는 Promise의 결과를 반환합니다.


▼ 사용 방법

const promise1 = asyncFunction1();
const promise2 = asyncFunction2();
const promise3 = asyncFunction3();

Promise.all([promise1, promise2, promise3])
    .then((results) => {
    console.log(results);
    })
    .catch((error) => {
    console.error(error);
    });

Promise.race([promise1, promise2, promise3])
    .then((result) => {
    console.log(result);
    })
    .catch((error) => {
    console.error(error);
    });

7. 에러 처리

Promise에서 발생하는 에러는 catch 메서드를 사용하여 처리할 수 있습니다. catch는 체인의 앞부분에서 발생한 모든 에러를 잡아내어 처리합니다.


▼ 사용 방법

myPromise
    .then((result) => {
    // 성공 시 실행되는 코드
    })
    .catch((error) => {
    // 실패 시 실행되는 코드
    });


이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!

동일 카테고리 게시글

위로 스크롤