728x90
반응형
1. Axios interceptor 개념과 필요성
(1) 개념
- 반복적으로 발생하는 일을 일괄적으로 처리 가능한 작업
- [요청] --- [interceptor] --- [응답]
(2) 필요성
- get,post,delete에 포트번호가 변경되면 모두 찾아서 변경해줘야함
- 요청 헤더 추가 / 인증 관리 / 로그 관련 로직 삽입 / 에러 핸들링 에서 좋음
2. vs code : Axios interceptor 적용
src > [.env]
REACT_APP_SERVER_URL = http://localhost:4002
▶여기다 적어놓고 App.js에서 사용할 예정
src > [App.js]
//[조회]
const fetchTodos = async () => {
//const { data } = await axios.get('http://localhost:4002/todos');
const { data } = await axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`);
console.log('data', data);
setTodos(data);
};
▶ `${process.env}` : .env 파일에 접근 가능
▶axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`);
★ 서버를 재시작해줘야하 확인 가능 ★
(* 포트 꺼지면 : yarn json-server --watch db.json --port 4000)
★ ★ 환경변수는 깃허브에 올리면 안됨 ★ ★
[Axios interceptor 적용 후]
src > axios > [api.js]
import axios from 'axios';
//axios instance => 만들어서 가공할 것
//[기존] axios.get / axios.post 로 api 호출 (intercept 작업 x)
const instance = axios.create({
baseURL: process.env.REACT_APP_SERVER_URL,
});
export default instance;
src > [App.js]
import api from './axios/api';
//[조회]
const fetchTodos = async () => {
//const { data } = await axios.get('http://localhost:4002/todos');
//const { data } = await axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`);
const { data } = await api.get('/todos');
setTodos(data);
};
▶api.get('/todos')로 끝남.
=> api.js 파일에서 baseURL에 process.env.REACT_APP_SERVER_URL도 넣어줬기 때문.
//[조회]
const fetchTodos = async () => {
const { data } = await api.get('/todos');
setTodos(data);
};
//[추가]
const onSubmitHandler = async () => {
api.post('/todos', inputValue);
fetchTodos();
};
//[삭제]
const onDeleteBtnHandler = async (id) => {
api.delete(`/todos/${id}`);
setTodos(
todos.filter((item) => {
return item.id !== id;
})
);
};
//[변경]
const onUpdateBtnHandler = () => {
api.patch(`/todos/${tartgetId}`, {
title: tartgetContent,
});
setTodos(
todos.map((item) => {
if (item.id == tartgetId) {
return { ...item, title: tartgetContent };
} else {
return item;
}
})
);
};
▶ Axios interceptor 적용 후 간단해짐!
3. vs code : Axios interceptor 심화
src > axios > [api.js]
import axios from 'axios';
//axios instance => 만들어서 가공할 것
//[기존] axios.get / axios.post 로 api 호출 (intercept 작업 x)
const instance = axios.create({
baseURL: process.env.REACT_APP_SERVER_URL,
});
instance.interceptors.request.use(
//요청을 보내기 전 수행되는 함수
function (config) {
console.log('인터셉터 요청 성공!');
return config; //freepass
},
//오류 요청을 보내기 전 수행되는 함수
function (error) {
console.log('인터셉터 요청 오류!');
return Promise.reject(error);
}
);
instance.interceptors.response.use(
//응답을 내보내기 전 수행되는 함수
function (response) {
console.log('인터셉터 응답 받았음!');
return response; //freepass
},
//오류 응답을 보내기 전 수행되는 함수
function (error) {
console.log('인터셉터 응답 오류 발생');
return Promise.reject(error);
}
);
export default instance;
(1) instance.interceptors.request.use( 함수 2개 들어감)
(2) 오류시 꼭 Promise.reject 해줘야함
끝.
반응형