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

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로 할 일을 가져 오기 위해 API를 호출하고 있으며 ID 4로 할일이 있기 때문에 작동합니다.

그러나 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가 존재하지 않으면 오류가 발생합니다.

이것이 이유입니다. 다음과 같이 작성된 가져 오기 코드를 찾을 수 있습니다.

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 핸들러 내부에서 응답이 정상인지 확인합니다. 응답이 정상이면 결과를 다음 핸들러로 보낼 메서드를 호출합니다.

응답이 정상이 아니라면 우리는 promise를 거부하므로 실제 오류를 인쇄하기 위해 .catch 핸들러를 호출합니다.