Axios에는 interceptors 라는 것이 있는데
인터셉터를 사용하면 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있다.
언제 쓰는가:
API 요청마다 해줘야 하는 반복적인 작업이 있을 때(예: 헤더에 토큰 싣기)
에러 관리를 한 곳에서 하고 싶을 때
request 인터셉터 (클라이언트 -> 서버)
instance.interceptors.request.use(
function (config) {
const accessToken = getCookie("accessToken");
const refreshToken = getCookie("refreshToken");
if (accessToken && refreshToken) {
config.headers.common["Authorization"] = `${accessToken}`;
config.headers.common["Refresh-Token"] = `${refreshToken}`;
}
return config;
},
function (error) {
return Promise.reject(error);
}
);cookie에 토큰을 저장하는 방식으로 로그인을 구현했기 때문에
쿠키에 엑세스 토큰과 리프레시 토큰 값이 있다면 헤더에 넣어주었다.
만약 axios create를 한 적이 없다면 instance 대신 axios를 넣으면 된다.
export const instance = axios.create({
baseURL: process.env.REACT_APP_API, <- 요청 보낼 서버 주소 적는 곳
headers: {
"Content-Type": "application/json", <- 헤더 기본 설정
withCredentials: true,
},
});
response 인터셉터 (서버 -> 클라이언트)
instance.interceptors.response.use(
function (response) {
console.log("interceptor >", response);
return response;
},
function (error) {
console.log("interceptor >", error);
return Promise.reject(error);
}
);지금은 단순하게 console에 응답을 찍어주는 식으로만 코드를 짰지만 만약 여기서 에러 관리를 하고 싶다면
function (error) {
if (error.status === 401) {
alert('로그인이 필요합니다.') }
}만약 에러 코드가 401번이면 alert에 로그인 메세지 띄워줘 같은 식으로 처리할 수 있다.
요약
Axios interceptors는 요청과 응답을 가로챈다
-> 요청과 응답에 반복되는 로직을 매번 넣기 귀찮을 때 사용하면 좋음
Axios interceptors는 인스턴스와 같이 쓰면 좋다
-> 만약 헤더에 실어 줘야 하는 값이 다르다? 근데 둘 다 반복된다?
-> 새 인스턴스 하나 파서 인터셉터 각각 설정해주면 됨
Axios interceptors는 요청 interceptors와 응답 interceptors로 나뉜다
-> 요청 인터셉터(요청 인터셉트) = (서버에 보낼 데이터 처리)
-> 응답 인터셉터(응답 인터셉트) = (서버에서 준 데이터 처리)
