catch 메소드는 마지막에 씁니다#8

😃 catch 메소드는 마지막에 씁니다#8

안녕하세요 TriplexLab 입니다.

이번 시간에는 catch 메소드를 실무에서 보통 어떻게 사용하는지 보겠습니다.

일단 다음 코드를 보면 지금 fetch함수 작업이 실패하더라도 catch메소드에서 대비를 하고 있기 때문에 괜찮습니다.
그런데 만약 catch 메소드 뒤에 있는 then 메소드 콜백에서 에러를 발생하면 어떻게 될까요??

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .catch((error) => { console.log(error) })
  .then((result) => { console.log(result) });

 

제가 여기서 이니적인 에러를 발생시켜 보겠습니다. 자 이코드를 실행 해보면

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .catch((error) => { console.log(error) })
  .then((result) => { 
    console.log(result) 
	throw new Error('test');
});

 

다음과 같이 fetch함수는 정상 실행 되어서 response 내용이 잘 출력 되었지만
그 뒤에서 실행되는 에러는 잡지 못했습니다. (빨간색으로 뜬것은 에러를 처리하지 못했다는 것 입니다.)

then메소드의 콜백에서 에러

제가 이렇게 then메소드의 콜백에서 에러를 발생시키면 then메소드에서 리턴했던 Promise 객체는 rejected 상태가 됩니다.

이렇게 rejected 상태의 Promise 객체만 남고 딱히 어떤 처리를 해주지 않으면 웹 브라우저는 에러로 인식합니다.
이 문제를 어떻게 해결할수 있을까요??

👉위와 같은 문제를 해결할수 있는 방법

정답은 catch 메소드를 가장 아래로 내리는 것 입니다. 다음과 같이 말이죠.

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { 
		console.log(result) 
		throw new Error('test');
	})
  .catch((error) => { console.log(error) });

이와 같이 쓰면 이제 fetch함수에서 실패해서 발생한 에러든, 제가 이니적으로 발생시킨 에러든 상관 없이
모두 대응 할수 있습니다. 코드를 실행한 결과 👇👇

catch 메소드를 사용한 결과

catch 메소드의 콜백이 실행 되어서 제가 이니적으로 발생시킨 에러 정보가 잘 출력 됩니다.
이번에는 fetch함수작업이 실패 하도록 해볼게요.

👉fetch함수작업이 실패시 에러 정보 확인하기

fetch함수 url에 존재하지도 않는 주소를 이니적으로 넣어주고 실행을 하면 다음과 같이
catch메소드의 콜백이 실행되고, fetch함수가 실패해서 생긴 TypeError가 잘 출력 됩니다.

TypeError 출력

이렇게 Promise 체이닝에서 어느 Promise객체가 rejected 상태가 되더라도 잘 대응하기 위해서는 catch메소드를
가장 마지막에 써주는것이 좋습니다.

catch메소드를 가장 마지막에 써주는것

 

실무에서도 보통 이렇게 catch메소드를 가장 마지막에 쓰니깐 잘 기억해주세요.!!👍👍