fetch

fetch가 네트워크 오류가 발생했을 때만 예외를 발생시킨다
즉, HTTP 요청이 서버에 도달하고 서버가 응답을 보낼 수 있는 상태라면, HTTP 응답 상태 코드가 4xx 또는 5xx 범위라 할지라도 fetch는 예외를 발생시키지 않음
==> 이는 fetch가 네트워크 실패와 HTTP 오류를 다르게 취급한다

HTTP 오류 상태 처리

• fetch는 요청이 성공적으로 완료되었을 때 (즉, 네트워크 요청이 성공적으로 이루어져 HTTP 응답을 받았을 때) Promise를 resolve함
• HTTP 상태 코드가 404나 500 같은 오류 코드라도 Promise는 resolve되고, catch 블록으로 가지 않음
• 응답 객체의 ok 속성(상태 코드가 200-299인 경우 true)을 확인하여 HTTP 오류 상태를 처리해야 함

네트워크 실패

• fetch는 네트워크 요청 자체가 실패한 경우 (= 네트워크 연결이 끊어진 경우)에만 Promise를 reject하고 catch 블록으로 감
• catch 블록에서 네트워크 오류를 처리가능

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log(data); // 응답 데이터 처리
    })
    .catch(error => {
        console.error('Network error or HTTP error:', error);
    });

⚠️해결방법

• response.ok를 검사하여 HTTP 오류 상태를 처리
• response.ok가 false라면, 즉 HTTP 상태 코드가 오류 범위에 있다면, 에러를 throw하여 catch 블록으로 제어를 넘김