Promise

지난 포스팅에 이어, 자바스크립트의 비동기처리로 인한 문제점 해결을 도와주는 방법인 Promise에 대해 공부를 해보도록 하겠습니다.

Promise는 미래에 성공하거나 실패할만한 값을 가지는 비동기 연산을 돕는 객체입니다. 또한 이 Promise객체는 "대기", "이행", "실패" 세가지 상태를 갖습니다.

• 대기(Pending): 비동기 처리 로직을 이행하기도 실패하지도 않은 초기 상태.
• 이행(Fulfilled): 비동기 처리가 성공해 프로미스가 결과 값을 반환해준 상태.
• 실패(Rejected): 비동기 처리가 실패하거나 오류가 발생한상태.

<center>MDN</center>

대기 중인 Promise는 값과 함께 이행이 될 수도 실패 될 수도 있습니다. 이렇게 이행이나 실패 될 경우 Promise의 then()메서드로, 실패한 경우 catch()메서드로 그 값이 전달되게 됩니다.

1. Promise.resolve() & Promis.reject()

Promise.resolve(value)는 결괏값이 value인 이행 상태 Promise를 생성하며, Promise.reject(error)는 결과값이 error인 거부 상태 Promise를 생성합니다.

예제를 보면서 다뤄보도록 하겠습니다

const promiseResolve = Promise.resolve('성공')
const promiseReject = Promise.reject('실패')

promiseResolve
.then((resolve) => {
  console.log('1회', resolve)
  return promiseResolve
})
.then((resolve) => {
  console.log('2회', resolve)
  return promiseResolve
}).then((resolve) => {
  console.log('3회', resolve)
  return promiseResolve
})

코드 실행 결과
1회 성공
2회 성공
3회 성공
▹Promise {<fulfilled>: '성공'}

이번에는 2회 째 리턴 값으로 promiseReject를 넣어보겠습니다.

promiseResolve
.then((resolve) => {
  console.log('1회', resolve)
  return promiseResolve
})
.then((resolve) => {
  console.log('2회', resolve)
  return promiseReject
}).then((resolve) => {
  console.log('3회', resolve)
  return promiseResolve
})

코드 실행 결과
1회 성공
2회 성공
▹Promise {<rejected>: '실패'}

코드 실행 결과 2회까지만 성공을 하고 이후 실패를 하는 것을 확인할 수 있습니다.

그렇다면 마지막으로 reject리턴시 catch()메서드를 사용하면 결과 값이 어떻게 출력이 되는지 확인을 해보도록 하겠습니다.