# fetch api Error 처리

### 발단: fetch api를 활용한 요청 에서의 발생한 상황

### 문제: try  catch문에서 에러가 잡히지 않았다.

바닐라 자바스크립트를 활용해 모듈을 만드는 과정에서 일이 생겼다.

웹 브라우저에서 에러가 잘 표시 되었으나 catch문의 로그에 찍히지 않았다.

구글링을 통해 폭풍 검색을 시작 하여 답을 찾아 내었다. 

### 원인: api 설계
fetch api 자체 설계가 그렇게 되어 있던 것이다.

> 취득 성공 여부 확인
> fetch() 프로미스는 네트워크에 오류가 있었거나, 
> 서버의 CORS 설정이 잘못된 경우 TypeError로 거부됩니다.
> 그러나 이 두 경우는 권한처럼 설정의 문제고,
> 404와 같은 응답은 네트워크 오류가 아니므로 거부하지 않습니다. 
> fetch()가 성공했는지를 정확히 알아내려면 프로미스의 이행 여부를 확인한 후,
> Response.ok 속성의 값이 true인지도 확인해야 합니다.
> 상태 코드가 200 이상 299 이하인지 간단하게 확인할 수 있는 불리언 값입니다.

그렇다...MDN에 나와 있었다....

거부됩니다 라는 것이 키워드 인듯 하다. 

살짝 실험해 본 결과 cors에러를 인위적으로 발생 시키면 

catch블럭에서 잡아 낼 수 있는 것으로 보아 네트워크 에러와 cors

는 일반적으로 catch블럭에서 에러 처리를 하면 되고,

200 ~ 299 외의 에러는 response객체의 ok 불리언 값을 잡아

에러를 처리하면 될 것이다.

<a href="https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch#%EC%9D%91%EB%8B%B5_%EA%B0%9D%EC%B2%B4" target="_blank">[참고: MDN]</a>