본문으로 건너뛰기
실습하기

프로미스(Promise)

프로미스는 JavaScript에서 비동기 작업의 결과를 대표하는 객체입니다.

여기서 비동기는 무엇을 의마하는 걸까요?


동기 & 비동기 통신​

네트워크로 통신은 크게 동기(Synchronous), 비동기(Asynchronous) 통신으로 나뉩니다.

동기는 작업을 순서대로 하나씩 처리하면서 이전 작업이 끝날 때까지 다음 작업을 보류하는 방식이고, 비동기는 여러 작업을 동시에 진행하면서 특정 작업이 끝나면 그 결과를 처리하는 방식을 의미합니다.


프로미스 (Promise)​

프로미스는 JavaScript에서 비동기 작업의 결과를 대표하는 객체입니다.

영단어 Promise 의미 그대로, 나중에 어느 시점에 결과를 제공할 것이라는 약속입니다. 이를 통해 비동기 연산이 완료될 때까지 기다린 후, 연산의 결과(성공 또는 실패)에 따라 추가 작업을 수행할 수 있습니다.

Promise는 주로 서버와의 통신, 이벤트 등 비동기적인 작업을 처리할 때 사용합니다.


Promise 사용 예시
const myPromise = new Promise((resolve, reject) => {
  const isDone = true;

  if (isDone) {
    resolve('작업 완료');
  } else {
    reject('작업 실패');
  }
});

myPromise
  .then((result) => {
    console.log(result); // 작업 완료
  })
  .catch((error) => {
    console.log(error); // 작업 실패
  });

위 예시는 Promise 객체를 생성해 myPromise 상수에 담고, myPromise.then 메서드를 통해 비동기 작업이 성공적으로 완료됐을 때 호출되는 콜백함수(함수 내부에서 호출되는 함수)를 등록합니다.

반면 myPromise.catch 메서드는 비동기 작업이 실패했을 때 호출되는 콜백함수를 등록합니다.

Promise는 작업이 성공적으로 완료되면 resolve()를, 실패하면 reject()를 호출합니다.


Promise의 특징​

  1. 상태 (States): 프로미스는 3가지 상태를 가집니다.

  • Pending(대기 중): 비동기 처리가 아직 완료되지 않은 상태

  • Fulfilled(이행됨): 비동기 처리가 완료되어 프로미스가 결과 값을 반환한 상태로, 성공 이후의 값을 반환합니다.

  • Rejected(거부됨): 비동기 처리가 실패한 상태로, 실패 이유를 반환합니다.


2.then과 catch:

  • .then(): 프로미스가 성공적으로 완료됐을 때 호출됩니다.

  • .catch(): 프로미스가 실패했을 때 호출됩니다.

  • .finally(): 프로미스의 성공/실패 여부에 상관 없이 무조건 호출됩니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!