본문 바로가기
Frontend/React

validateStatus - axios

by 잘먹는 개발자 에단 2024. 9. 18.

php로 api를 짰다. 

 

코드 중에 대충 이런 코드가 있다.

        $preQuery = "
            SELECT email FROM reserved_user WHERE email = :email
        ";
        $stmt = $pdo->prepare($preQuery);
        $stmt->bindParam(':email', $email);
        $stmt->execute();

        $result = $stmt->fetch(PDO::FETCH_ASSOC);
        if (!empty($result)) {
            // 이미 존재하는 이메일일 경우
            http_response_code(409);  // 중복된 데이터 (HTTP 409 Conflict)
            echo json_encode(['message' => 'Email is already reserved']);

 

Insert를 하는데, 이미 있는 데이터인지 확인을 하고 있다면

중복된 데이터 오류 응답코드 (409)를 반환한다.

 

근데..!

 

 

보통 에러 처리할때 이렇게 했었다.

const fetchList = async() => {
	try{
    	const result = await axios(url, data);
        
        if(result.status === 200){
        	// 처리
        }else if (result.status === 409){
        	// 데이터 이미 있으니까 있다고 알려주는 처리
        }
        .
        .
        .
    }catch(exception){
    	alert(exception.message);
    }
}

 

이렇게 하려고 하는데 아니!

 

else if 문을 안거치는 것이다!

 

 

이는 다음 때문이었다.

 

axios는 기본적으로 200 ~ 299 범위 이외의 HTTP 상태코드를 에러로 간주해서 자동으로 catch 블록으로 넘어가도록 되어있다.

그래서 내가 409 코드에 대한 else if 블록에서 throw new Error('~~~~')를 하려 했지만 블록까지 도달이 안된 것이다.

 

그래서 409 Conflict가 발생했을 때 else if (result.status === 409) 구문으로 처리되지 못하고 바로 catch로 간 것이다.

 

 

때문에 다음의 옵션을 추가한다.

바로 axios의 validateStatus 옵션이다.

 

 const result = await axios.post(
        url,
        data,
        { validateStatus: (status) => status < 500 } // 500 미만의 상태 코드는 에러로 처리하지 않음
      );

 

이렇게 하면 500 미만의 상태 코드는 모두 정상으로 간주되어서, try 블록 내에서 상태 코드별로 분기처리가 가능하게 된다.

따라서 result.status === 409 조건을 만족하면 내가 원하는 대로 처리할 수 있게 된 것이다.!

 

 

'Frontend > React' 카테고리의 다른 글

Suspense와 ErrorBoundary  (0) 2024.12.03
useEffect와 setState의 배치 처리  (1) 2024.12.03
useTransition  (0) 2024.12.03
왜 리액트 배포하고 새로고침하면 404에러가 뜰까?  (0) 2024.10.11
코드 스플리팅  (1) 2024.10.10