[react] HTTP 상태 코드 및 예외처리

HTTP 상태 코드

• 2XX번대 : 서버가 클라이언트의 요청을 성공적으로 처리했다는 의미
• 4XX번대 : 클라이언트의 요청이 유효하지 않아 서버가 해당 요청을 수행하지 않았다는 의미
• 5XX번대 : 서버 오류로 인해 요청을 수행할 수 없다는 의미

// async와 await를 사용하여 위의 함수를 아래와 같이 만들 수 있다
function 함수() {
  fetch('url')
    .then(response => response.json())  // 응답을 JSON 형태로 파싱
    .then(data => {})
}

// async, await 사용
async function 함수() {
  const response = await fetch('url');
  const data = await response.json();
}

 

 

예외처리

일반적인 상황(try...catch)

• 에러가 발생할 수 있는 부분을 try 함수 내에 작성한다.
• try 내부에서 에러 발생 시 어떻게 처리할 것인지에 대한 부분을 catch 함수 내에 작성한다.

비동기상황(.catch)

• 비동기상황에서의 예외처리는 예외가 발생하는 시점과 try가 싸고 있는 시간이 일치하지 않아 try...catch 로 에러를 잡을 수 없다.
• 하지만 async, await 구문을 사용하게 되면 예외가 발생되는 시점이 try가 싸고 있는 시간과 일치하기 때문에 try...catch, .catch 둘다 사용 가능하지만 오류 디버깅을 위해 try...catch 구문을 많이 사용한다.
  • try...catch : 스스로 에러를 잡고, 에러를 거부상태의 프로미스로 변경시킨다.
  • .catch : 프로미스에서 발생한 모든 에러를 다룬다. 에러를 처리하고 싶은 지점에 정확히 위치시켜야 하며, 어떻게 에러를 처리할지 알고 있어야 한다.