fetch() 사용 시 주의할 점 [API 호출]

아래 코드를 살펴보십시오.

fetch('https://jsonplaceholder.typicode.com/todos/4')
        .then(response => response.json())
            .then(result => console.log('success:',result))
                .catch(error => console.log('error:', error));

여기서는 ID가 4인 todo를 가져오기 위해 API를 호출하고 있으며 작동합니다.
id가 4인 todo가 있기 때문에 id가 존재하지 않거나
서버에서 404 또는 500 또는 기타 오류와 같은 오류가 발생합니까?

fetch('https://jsonplaceholder.typicode.com/todos/2382822')
        .then(response => response.json())
            .then(result => console.log('success:',result))
                .catch(error => console.log('error:', error));

여기서는 존재하지 않는 매우 큰 id를 제공했습니다. 하지만 만약 당신이
브라우저 콘솔에서 실행하면 성공 메시지가
분명히 404 오류인데도 인쇄됩니다.
이상적으로는 .catch 핸들러를 실행해야 하지만 그렇지 않습니다.
fetch 의 경우에 발생합니다.
페치는 실패할 때만 .catch 핸들러로 들어갑니다.
예를 들어 네트워크를 사용할 수 없거나 도메인이
존재하지 않는다.

따라서 CRUD(생성, 읽기, 업데이트,
삭제) 작업과 ID가 존재하지 않으면 오류가 발생합니다.
가져오기를 사용하는 경우 추가 코드를 많이 작성해야 합니다.
성가신 모든 HTTP 상태 코드 오류를 처리합니다.
따라서 대규모 애플리케이션을 구축 중이거나 원하지 않는 경우
모든 HTTP 상태 코드 오류를 처리한 다음 axios 또는 superagent를 사용하거나
fetch 대신 다른 라이브러리.
모든 라이브러리에서 catch는 다음이 있을 때 실행되기 때문입니다.
코드를 작성하는 것보다 처리하기 쉬운 모든 유형의 오류
모든 상태 코드.
이것이 이유입니다. 다음과 같이 작성된 가져오기 코드를 찾을 수 있습니다.

fetch('https://jsonplaceholder.typicode.com/todos/4')
                .then((response) => {
                   if (response.ok) {
                     return response.json();
                   }
                    return Promise.reject(response);
                })
                .then((result) => {
                    console.log(result);
                })
                .catch((error) => {
                    console.log('Something went wrong.', error);
                });

.then 핸들러 내부에서 응답이 ok인지 확인합니다.
응답이 OK이면 response.json() 메서드를 호출합니다.
결과를 다음 .then 핸들러로 보냅니다.
응답이 좋지 않으면 약속을 거부하는 것입니다.
.catch() 처리기를 호출하여 실제 오류를 인쇄합니다.

이 기사가 당신이 무언가를 이해하거나 자신을 향상시키는 데 도움이 되기를 바랍니다! 질문이 있으시면 댓글로 물어봐주세요!
기꺼이 도와드리겠습니다! 😊