TIL-67 promise.then(f, f) vs promise.then(f).catch(f)

PRB·2022년 3월 8일
1

JavaScript

목록 보기
22/24
post-thumbnail

자바스크립트에서는 promise의 성공과 실패를 2가지로 처리할수있다.

const onSuccess = (value) => {
  console.log('성공:', value)
}

const onFailure = (error) => {
  console.log('실패:', error)
}
// resolved의 경우
Promise.resolve('Hi').then(onSuccess, onFailure) // 성공: Hi
Promise.resolve('Hi').then(onSuccess).catch(onFailure) // 성공: Hi

// reject의 경우
Promise.reject('Sorry').then(onSuccess, onFailure) // 실패: Sorry
Promise.reject('Sorry').then(onSuccess).catch(onFailure) // 실패: Sorry

여기까지는 동일하다.

둘의 차이는 resolve에서 rejected가 발생할 때 알 수 있다.

const onSuccessButRejected = (value) => {
  console.log('Promise has been resolved with value:', value)
  return Promise.reject('Oops, Sorry')
}

Promise.resolve('성공').then(onSuccessButRejected, onFailure)
// Promise has been resolved with value: 성공
// Promise {<rejected>:"Oops, Sorry"}
// Uncaught (in promise) Oops, Sorry

Promise.resolve('성공').then(onSuccessButRejected).catch(onFailure)
// Promise has been resolved with value: 성공
// Promise has been rejected with error: Oops, Sorry
// Promise {<fulfilled>:undefined}

catch는, then 내부에서도 reject가 발생했을 때에도 호출된다.

if/else는 내가 예측할 수 있는 경우를 else로 처리한다.
반면, try/catch는 내가 예측할 수 있는 경우를 포함하여 모든 경우의 수가 catch로 처리된다.
따라서, 내가 잠재적으로 처리하고 싶은 명확한 failure가 있다면, promise.then(oSuccess, onFailure)를 쓰는 것이 부수효과(side effect)를 방지하는데 있어 도움이 된다.
반면 promise.catch(onFailure)는 내가 예측하지 못한 경우를 포함한 모든 에러 - 지정된 작업이 성공처리가 되지 않거나, 비동기 흐름으로 인해 발생하는 오류 - 를 처리할 때 사용하는 것이 좋을 것 같다.

출처 https://yceffort.kr/2021/07/promise-then-f-f-vs-promise-catch

profile
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

0개의 댓글