Promise

promise

→ 콜백 함수의 단점(콜백지옥)을 보완하기 위해 ES6에 도입된 비동기 처리에 사용되는 객체

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.




상태

대기(pending)

이행하지도, 거부하지도 않은 초기 상태.

이행(fulfilled)

연산이 성공적으로 완료 → 결과값 반환

거부(rejected)

연산이 실패 → 에러 반환


메서드

promise.then()

  • resolve / reject 상태일 때 호출
  • 매개변수: resolved일 때 실행할 함수, rejected일 때 실행할 함수
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('ERROR!');
  }, 3000);
});

promise.then((value) => console.log(value));



promise.catch()

  • rejected 상태이거나 에러가 발생했을 때 실행(에러 핸들링)
  • 매개변수: 에러가 발생했을 때 실행할 함수
const promise = new Promise((resolve, reject)=>{
  setTimeout(()=>{
    reject("ERROR!");
  }, 3000);
});

promise
	.then(result => console.log(result))
	.catch(error => console.log(error));



promise.finally()

  • Promise의 resolve / reject 결과와 상관 없이 지정된 함수 실행
const promise = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, "First");
});

promise
	.then(result => console.log(result))
	.finally(() => console.log("End"));




Callback VS Promise

Callback

getPost( 
    postNum,
    (postId) => {
      console.log('Post', postId);
      getComments(
        postId,
        (result) => {
          console.log('Comments:' , result)
        },
        (message) => {
          console.log(message);
        }
      )
    },
    (message) => {
      console.log(message);
    }
  )

→ 콜백이 중첩되면서 콜백 지옥 발생 가능성
→ 에러 핸들링 제공 X



Promise

getPost(postNum)
  .then(postId => {
    console.log('Post:', postId)
    return getComments(postId)
  })
  .then(result => console.log('Comments:', result))
  .catch(message => console.log(message));

→ 중첩 없이 연속적 비동기 작업 처리
→ .catch()문을 통해 에러 핸들링
→ .then() 지옥의 가능성




references
👉 https://velog.io/@syoung125/JS-Promise%EB%9E%80