프로미스(Promise)의 세 가지 상태

프로미스(promise) 객체는 비동기 작업의 최종 결과 성공 또는 실패를 나타내는 것을 말합니다.

• 프로미스를 사용하면 비동기 메소드에서 동기 메소드처럼 값을 반환할 수 있습니다.
• 다만 최종 결과를 반환 하는 것이 아닌, 미래의 어떤 시점에서
  결과를 제공하겠다는 '프로미스'를 반환(return)합니다.

---

 

 

promise는 다음 중 하나의 상태를 지닙니다.

• 대기(pending): 비동기 작업이 진행 중일 때
• 이행(fulfilled): 비동기 작업이 성공적으로 처리 됨
• 거부(rejected): 비동기 작업이 실패함

대기 중인 프로미스는 값과 함께 이행될 수도, 거부될 수도 있습니다.

 

먼저 대기(Pending) 상태에 대해 아래의 코드와 함께 알아 봅시다.

 

---

 

1. 대기(Pending)

• 초기의 상태로 비동기 작업이 아직 완료되지 않은 상태입니다.
• resolve() 또는 reject()가 호출되지 않은 상태를 말합니다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 setTimeout, fetch 등이 사용 됨
  console.log("비동기 작업 수행 중...");
});
console.log(promise);  // 출력: Promise { <pending> }

위와 같이 코드를 입력하면 대기(Pending)상태가 뜨는 것을 확인 해볼 수 있습니다.

 

해당 코드에 덧붙혀 이행(fulfilled) 상태에 대해 알아봅시다.

---

 

2. 이행(Fulfilled)

• 비동기 작업이 성공적으로 완료되고 resolve()가 호출된 상태입니다.
• .then()문을 사용하여 결과를 처리할 수 있습니다.

const promise = new Promise((resolve, reject) => {
    // 비동기 작업 시작
    setTimeout(() => {
        resolve("처리 완료"); // 2초 후에 작업 성공 시 resolve 호출
    }, 2000); // 2초 지연
});
console.log(promise); // Pending (대기) 상태 출력

//2초 후 결과값 출력
promise.then((result) => {
  console.log(result); // 출력: 처리 완료 (2초 후)
});

대기(Pending) 상태가 출력 되고 2초 후, 처리 완료라는 문자가 출력됩니다.

 

• then(): fulfilled 상태가 되면 실행할 콜백 함수를 지정

 

다시 해당 코드를 기반으로 이번에는 에러를 던져 거부(Rejected) 상태를 알아봅시다.

---

 

3. 거부(Rejected)

• 비동기 작업이 실패하고 reject()가 호출된 상태입니다.
• .catch()문을 사용하여 오류를 처리할 수 있습니다.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("처리 실패");
  }, 2000);
});

promise.catch((error) => {
  console.error(error);  // error값을 일부러 줌   출력: 처리 실패 (2초 후)
});

대기(Pending) 상태가 출력 되고 2초 후, 처리 실패라는 문자가 출력됩니다.

 

• catch(): rejected 상태가 되면 실행할 콜백 함수를 지정

---

• 추가적으로 finally()문이 있는데, 이는 fulfilled / rejected 어떠한 상태이든 상관 없이 실행할 콜백 함수를 지정하는 것 입니다.

아래 예제 코드를 통해 알아봅시다.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const isSuccess = Math.random() > 0.5;  // 50% 확률로 성공 또는 실패하는 값을 줌
    if (isSuccess) {
      resolve("처리 성공");
    } else {
      reject("처리 실패");
    }
  }, 2000);  // 2초 후 실행
});

promise
  .then((result) => {
    console.log(result);  // 출력: 처리 성공 (2초 후, 성공 시)
  })
  .catch((error) => {
    console.log(error);  // 출력: 처리 실패 (2초 후, 실패 시)
  })
  .finally(() => {
    console.log("처리 완료되었습니다.");  // 결과가 성공이든 실패든 항상 실행됨
  });

절반의 확률로 성공과 실패가 결정 된 후, 그 결과에 따라 result 혹은 error가 출력되며,
어떠한 작업이라도 출력 된 후에는 "처리 완료되었습니다." 라는 문자가 출력됩니다.

 

---

• fetch - 데이터를 가져와서 패치하는 것으로 자바스크립트 내장함수입니다.

간단한 예문으로는 아래와 같습니다.

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => response.json())  // 응답을 JSON으로 변환
  .then((data) => console.log(data))  // 데이터 출력
  .catch((error) => console.error("오류 발생:", error));  // 오류 처리
  
  // 결과 값{ userId: 1, id: 1, title: 'delectus aut autem', completed: false }

 

위는 fetch를 활용한 GET 요청을 수행하는 예문이며, 실제 프로젝트에서는 fetch()를 async / await 와 함께 사용하면 더 가독성이 좋은 코드로 작성할 수 있습니다.