비동기 결과를 처리하기 위해 사용되는 Callback 패턴은 중첩된 callback 함수로 인한 callback hell 과 에러처리의 어려움이 있다.

그래서 ES6에서 Promise가 도입되었다. Promise에 대해서 알아보자.

Promise 기본 사용법

const promise = new Promise((resolve, reject) => {
  if (성공 조건문) {
    // 성공
    resolve(true)
  } else {
  	// 실패
    reject(false)
  }
])

Promise의 callback 함수는 resolve와 reject 인자를 넘겨받는다.

Promise의 상태값

성공한 상태값을 넘겨주고 싶을 경우 resolve를 사용하고,
실패한 상태값을 넘겨주고 싶을 경우 reject를 사용한다.
상태에 따라 다른 함수로 결과값을 넘겨주는 이유는 에러처리를 하기 위함이다.

Promise의 에러처리

const getAPI = () => {
  return new Promise((resolve, reject) => {
	if (성공 조건문) { resolve('1')}
    else {reject(new Error('ERROR'))}
  })
}

getAPI()
  .then((v) => { 
  	// resolve로 인자를 넘겨줄 경우 then으로 온다.
  	console.log(v) // 1
  })
  .catch((e) => {
    // reject로 인자를 넘겨줄 경우 catch로 온다.
    console.error(e.message) // ERROR
  })
  .finally(() => {
    // resolve, reject와 상관없이, 마지막엔 무조건 finally 스코프를 실행한다.
    console.log('bye')
  })

이처럼 callback 패턴과는 다르게, 에러 상태를 관리함으로써 에러 처리가 가능해졌다.
또한, 중첩되는 callback 함수로 인한 callback hell으로 부터 벗어날 수 있다.

Promise 의 단점

연속적인 체이닝 -> 가독성 저하

위와 같은 이점이 있지만, Promise도 여전히 callback 함수를 사용하고 있다. 때문에 연속적인 비동기 함수의 처리를 하게될 경우, 아래의 코드처럼 체이닝이 연속적으로 발생하게 되며, 가독성이 좋지 않다.

getAPI()
  .then(()=>{....})
  .then(()=>{....})
  .then(()=>{....})
  .then(()=>{....})
  .then(()=>{....})
  .catch(()=>{...})

Promise의 단점을 보완하기 위해 async/await 패턴이 등장했다.
다음 글에서 async / await에 대해 알아보자.

setTimeout(() => console.log(1), 0)
Promise.resolve()
  .then(() => console.log(2))
  .then(() => console.log(3))