원글 페이지 : 바로가기
⭕ 카카오테크캠퍼스 2기 | STEP2 | 27일차(24-07-30) 회고 📝 에러 핸들링 지난주 리뷰를 통해 서버에서 전달하는 에러 메시지를 활용하는 방법에 대해 고민하게 되었다. 기존에는 fetch를 사용하여 에러를 처리했지만, 서버에서 전달하는 에러 메시지를 활용하면 사용자에게 더 구체적이고 유용한 피드백을 제공할 수 있다는 점을 알게 되었다. 특히, axios를 사용하여 인터셉터를 통해 에러를 처리하는 방법이 더 효율적일 것이라는 피드백에 특히 집중했다. fetch와 axios의 차이점 fetch는 브라우저 내장 API로서 가볍고 간편한 비동기 요청 처리 방법을 제공한다. 예를 들어, fetch를 사용하여 HTTP 요청을 보내는 코드는 다음과 같다. fetch(‘
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(‘Error:’, error)); 반면, axios는 더 많은 기능과 유연성을 제공하며, 특히 인터셉터를 통해 요청과 응답을 가로채서 추가 로직을 실행할 수 있는 기능을 제공한다. 이는 에러 처리를 일관성 있게 관리할 수 있는 장점을 가지고 있다. axios 설정 및 인터셉터 적용 먼저 axios 인스턴스를 생성하고 기본 설정을 정의한다. import axios from ‘axios’;
const axiosInstance = axios.create({
baseURL: ‘
timeout: 1000,
}); 인터셉터는 모든 HTTP 응답을 가로채서 에러를 일관성 있게 처리할 수 있도록 도와준다. 인터셉터를 통해 에러 응답을 처리하는 코드를 추가한다. axiosInstance.interceptors.response.use(
response => response,
error => {
if (!error.response) {
throw new Error(‘Network error’);
}
const { status, data } = error.response;
if (status === 403) {
throw new Error(data.message || ‘Invalid email or password’);
}
throw new Error(data.message || ‘An error occurred during login’);
}
); 비동기 요청 처리 기존의 fetch 코드에서는 단순히 상태 코드만 확인했지만, axios로 전환하면서 더 상세한 에러 정보를 활용할 수 있게 되었다. axiosInstance를 사용하여 로그인 요청을 보내고, 에러가 발생하면 콘솔에 로그를 남기고 에러를 다시 던진다. 이렇게 하면 에러 처리가 일관성 있게 이루어진다. export const login = async (credentials) => {
try {
const response = await axiosInstance.post(‘/login’, credentials);
return response.data;
} catch (error) {
console.error(‘Login failed’, error);
throw error;
}
}; 📝 Daily Scrum 지난주 PR에 대한 리뷰 반영 😋 Today 회고 axios의 인터셉터를 사용하여 에러 메시지를 처리하는 방법을 이해하게 되었다. 이를 통해 반복적인 코드 작성을 줄이고, 에러 처리를 일관성 있게 관리할 수 있었다. 네트워크 오류나 인증 오류와 같은 다양한 상황에 대해 사용자에게 더 유용한 피드백을 제공할 수 있다는 점이 특히 좋았다. ➡️ 참고 링크 https://axios-http.com/kr/docs/handling_errors 에러 핸들링 | Axios Docs 에러 핸들링 axios.get(‘/user/12345’) .catch(function (error) { if (error.response) { console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { console.log(error.request); } e axios-http.com https://velog.io/@bokjunwoo/Axios-%EC%9D%B8%ED%84%B0%EC%85%89%ED%84%B0%EC%97%90%EC%84%9C-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81%ED%95%98%EA%B8%B0 Axios 인터셉터에서 에러 핸들링하기 이번에는 Axios 인터셉터를 사용하여 에러를 핸들링하는 방법 velog.io