React Interceptor

1. Interceptor 의 동작 원리

1-1. 요청 인터셉터(request interceptor)

• API 요청이 서버로 전송되기 직전에 실행된다.
• 주로 공통 헤더 추가, 인증 토큰 첨부, 요청 데이터 가공 등의 작업에 사용된다.

apiClient.interceptors.request.use(
  (config) => {
    console.log('Request sent:', config);
    return config; // 요청 전 로직 추가
  },
  (error) => {
    return Promise.reject(error); // 요청 에러 처리
  }
);

 

1. config

• 요청 객체를 나타낸다. 여기에는 method, url, headers, params 등이 포함된다.
• 요청을 보내기 전에 잉 객체를 수정할 수 있다.
• 예: 토큰을 헤더에 추가하거나 기본 값을 설정

2. 요청 전 로직

• 이 로직은 요청을 보내기 전에 실행된다.

config.headers.Authorization = `Bearer ${token}`;

 

3. 에러 처리

• 요청 설정에서 문제가 생겼을 경우, 에러를 처리하거나 반환한다.

return Promise.reject(new Error('Request setup failed'));

 

 

1-2. 응답 인터셉터(response interceptor)

• 서버에서 받은 응답이 실제 코드로 전달되기 직전에 실행된다.
• 주로 응답 데이터 변환, 에러 처리, 로깅 등에 사용된다

apiClient.interceptors.response.use(
  (response) => {
    console.log('Response received:', response);
    return response; // 응답 후 로직 추가
  },
  (error) => {
    return Promise.reject(error); // 응답 에러 처리
  }
);

 

1. response

• 서버로부터 받은 응답 객체를 나타낸다.
• 여기에는 status, data, headers 등이 포함된다.
• 응답 데이터를 가공하거나 검증할 수 있다.

2. 응답 후 처리

• 성공적으로 받은 데이터를 변환하거나 로깅에 사용한다.

if (response.status === 200) {
  console.log('Success:', response.data);
}
return response.data; // 필요한 데이터만 반환

 

3. 에러 처리

• 서버로부터 에러 응답이 온 경우, 이를 처리하거나 에러를 반환한다.

if (error.response.status === 401) {
  console.error('Unauthorized access!');
}
return Promise.reject(error);