본문 바로가기
[ Script ]/JAVA Script

[ JAVA Script ] Promise Constructor

by 환이s 2023. 10. 21.


오늘은 비동기 작업을 다룰 때 사용되는 Promise() 생성자에 대해 알아보겠습니다.

 

Promise Constructor 

 

new Promise()

 

Promise는 JS에서 비동기 작업을 다룰 때 사용되는 객체로 사용되며 비동기 작업의 결과를 나중에 받아오기 위한 방법을 제공해 주는데,  주로 네트워크 요청, 파일 읽기/쓰기, 타이머 이벤트 등과 같은 비동기 작업을 처리할 때 유용합니다. 

 

Promise를 사용할 때 알아야 하는 가장 기본적인 개념은 바로 promise states(상태)입니다.

여기서 말하는 states란 promise의 처리 과정을 의미하며, 위 예시처럼 new Promise()로 promise를 생성하고 종료될 때까지 3가지 상태를 갖습니다.

 

 

  • Pending(대기)
    • 초기 상태, 작업이 완료되지 않은 상태
const pendingPromise = new Promise((resolve, reject)) => {
	// 아무 작업도 수행하지 않음.
 });

 

  • Fulfilled(이행)
    • 비동기 작업이 성공적으로 완료된 상태
    • 'Fulfilled' 상태의 Promise는 성공적으로 작업을 마친 경우 'then' Method로 결과를 처리합니다.
const fulfilledPromise = new Promise((resolve, reject)) => {
	// 비동기 작업 성공 시 resolve 호출 합니다.
    
  setTimeout(() => {
  	resolve("작업 성공 결과!");
  },  1000);
  });
  
  
  
fulfilledPromise.then(result => {
	console.log("Fulfilled 상태 확인 : " , result);
});

 

  • Rejected(거부)
    • 비동기 작업이 실패한 상태
    • 'Rejected' 상태의 Promise는 작업이 실패한 경우 'catch' Method로 error를 처리합니다. 
const rejectPromise = new Promise((resolve , reject) => {
	// 비동기 작업 실패 시 reject 호출 합니다.
    
    setTimeout(() => {
     reject("작업 실패 이유");
    }, 1000);
});

rejectPromise.catch(error => {
	console.error("Reject 상태 = ", error);
});

 

Promise가 안정화되면 then(), catch() 또는 finally()를 통해 연결된 추가 핸들러를(비동기적으로) 호출합니다. 

최종 이행 값 또는 거부 이유는 입력 매개변수로 이행 및 거부 핸들러의 호출에 전달됩니다.

 

정리하자면, 실제 프로젝트에서는 네트워크 요청, 파일 로딩, 데이터베이스 쿼리와 같은 비동기 작업을 처리하는 데 사용될 것이며, 해당 작업이 Fulfilled(이행), 또는 Rejected(거부) 상태로 변경될 것입니다.


Promise() 생성 예제

 

Promise를 사용한 간단한 예제를 통해서 알아봅시다.

 

function delay(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (ms >= 1000) {
        resolve("성공");
      } else {
        reject("실패");
      }
    }, ms);
  });
}

delay(1200)
  .then(result => {
    console.log("결과:", result);
  })
  .catch(error => {
    console.error("에러:", error);
  });

 

위 코드는 setTimeout을 사용하여 비동기적으로 일정 시간 후에 '성공' 또는 '실패' 메시지를 반환하는 Promise를 생성하는 예제입니다.

 

'delay' 함수는 주어진 ms(밀리초) 이후에 '성공' 또는 '실패' 결과를 반환하는 Promise를 생성합니다.

 

'then' 메서드는 Promise가 이행된 경우에 실행되며 '성공' 결과를 처리하고,

 

'catch' 메서드는 Promise가 거부된 경우에 실행되는 error를 처리합니다.


마치며

 

오늘은 간단한 예제를 통해서 Promise 생성자에 대해 알아봤습니다.

다음 포스팅으로 뵙겠습니다.

728x90

'[ Script ] > JAVA Script' 카테고리의 다른 글

[ jQuery ] Validation Plugin - 유효성 검사  (3) 2024.01.23
[ jQuery ] DataTables - Ajax Table Data 출력  (46) 2024.01.18
[ JAVA Script ] Mobile Web UI구현  (0) 2023.02.28
[ JAVA Script ] Ajax  (0) 2023.02.27
[ JAVA Script ] jQuery  (0) 2023.02.25