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 |