.catch

.esc·2021년 2월 19일

Promise error handler

promise가 reject되면 가장 가까운 에러 핸들러에서 에러를 처리하게 된다.

catch

.catch는 promise에서 발생한 모든 에러를 처리한다.
하나 또는 여러개의 .then뒤에 .catch를 사용할 수 있다.

fetch('존재하지 않는 주소')
  .then(res => res.json())
  .catch(err => alert(err)) // TypeError: failed to fetch

try...catch

promise는 보이지않는 try...catch가 에러를 잡고, promise를 reject상태로 변경시킨다.

new Promise((resolve, reject) => {
  reject(new Error("에러 발생!"));
}).catch(alert); // Error: 에러 발생!

new Promise((resolve, reject) => {
  throw new Error("에러 발생!");
}).catch(alert); // Error: 에러 발생!

두 코드는 같은 결과를 출력한다.

new promise((resolve, reject) => {
  resolve("ok");
}).then((result) => {
  throw new Error("에러 발생!");
}).catch(alert); // Error: 에러 발생!

.then안에서 throw를 사용해 에러를 던지면,
이 자체가 reject promise를 의미하게 되고,
따라서 가장 가까운 에러 핸들러로 넘어가게 된다.

에러 다시 던지기

promise chain의 마지막 .catch는 try...catch와 비슷한 역할을 한다.
.then을 원하는 만큼 사용하다가 마지막에 .catch하나를 붙이면 .then에서 발생한 모든 에러를 처리할 수 있다.

new Promise((resolve, reject) => {
  throw new Error("에러 발생!"); // 1.
}).catch(function(error) { // 2.
  if(error instanceof URIError) {
  // 에러 처리
  } else {
    alert("처리할 수 없는 에러!");
    throw error; // 3.
  }
}).then(function() {
  // 4. 
}).catch(error => { // 5.
  alert(`알 수 없는 에러가 발생함: ${error}`);
});

throw로 인해 promise가 reject상태가 된다.

.catch에서 에러 처리를 한다.

처리할 수 없는 에러라면 다시 에러를 던진다.

에러이기 때문에 다음 .then은 실행되지 않는다.

다음 .catch에서 에러를 처리한다.
(여기서 에러가 성공적으로 처리되고 그 다음에 .then이 사용되면 실행이 이어지게 된다.)