const getJamData = async () => {
await axios
.get(`${BASE_URL}/jams/${id}`)
.then(res => {
setJamData({ ...res.data });
setIsComplete({ ...res.data }.completeStatus);
setJoiner({ ...res.data }.participantList);
});
};
axios 를 통한 요청시 { validateStatus: false } 옵션을 설정하면 status에 대한 검증 자체를 하지 않기 때문에 에러를 처리하는 catch 로 넘어가지 않고 try 내부에서 404 에러를 상태코드로 잡아서 처리할 수 있다고 한다
const getJamData = async () => {
await axios
.get(`${BASE_URL}/jams/${id}`, { validateStatus: false })
.then(res => {
if (res.status === 404) {
navigate('*');
setTimeout(() => {
alert('잘못된 접근입니다. 메인페이지로 이동합니다.');
navigate('/');
}, 3000);
} else {
setJamData({ ...res.data });
setIsComplete({ ...res.data }.completeStatus);
setJoiner({ ...res.data }.participantList);
}
});
};
에러에 대한 처리이므로 try catch 구문의 catch에서 처리
error의 status로 바로 에러 처리하지 않고 다음과 같이 response 프로퍼티의 status로 처리
console로 에러 객체를 확인해보면 404를 어떻게 잡아야할지 확인할 수 있었다.
error 객체 확인
코드 적용 후
const getJamData = async () => {
try {
const res = await axios.get(`${BASE_URL}/jams/${id}`);
if (res.status === 200) {
setJamData({ ...res.data });
setIsComplete({ ...res.data }.completeStatus);
setJoiner({ ...res.data }.participantList);
}
} catch (error) {
// console.log('error', error); // 에러 객체 확인용
if (error.response.status === 404) {
navigate('*');
setTimeout(() => {
alert('잘못된 접근입니다. 메인페이지로 이동합니다.');
navigate('/');
}, 3000);
}
}
};