[리액트 React] 엑시오스 인터셉터(Axios interceptor)

Axios interceptor

• 클라이언트에서 서버로 요청이 보내지기 전이나 서버에서 클라이언트로 응답을 받은 후에 실행되는 함수이다.
• interceptor를 이용해 HTTP 요청 및 응답의 중간 흐름을 가로채 수정할 수 있다

 

interceptor를 활용하면 할 수 있는 일들 

• 요청 헤더 추가
• 인증 관리
• 로그 관련 로직 삽입
• 에러 핸들링

---

instance 만들기, baseURL 설정하기

• axios의 데이터 요청 시 ( )에 서버 주소를 직접 넣어주는 방식 대신, 리덕스의 액션크리에이트를 상수를 만들어 사용했듯 axios에 입력하는 서버 주소에 대한 휴먼 에러를 줄이기 위해 instance를 이용하여 baseURL에 서버 주소를 넣어 사용한다
• 서버 주소가 변경될 경우 baseURL만 수정해 주면 되기 때문에 유지보수가 용이하다

// 직접 URL입력 방법
const data = axios.get("http://localhost:4000/todo");

// instance로 baseURL을 만든 뒤 사용 방법
const data = axios.get(`${baseURL}/todo`);

// baseURL을 만드는 방법
import axios from "axios";

const instance = axios.create({
	baseURL: "http://localhost:4000",
});

// instance 를 꼭 export default해야 import해서 사용할 수 있다
export default instance;

// axios.create의 입력값으로 들어가는 객체는 configuration 객체에요.
// https://axios-http.com/docs/req_config
// 위 주소를 참고해주세요!

---

instance를 이용해 request, response 가로채기

• instance.interceptors를 이용해 요청 / 응답 사이에 console.log 메시지를 출력하도록 할 수 있다

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:4000",
});

instance.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전 수행
    console.log("인터셉트 요청 성공!");
    return config;
  },
  function (error) {
    // 오류 요청을 보내기 전 수행
    console.log("인터셉트 요청 오류!");
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function (response) {
    console.log("인터넵트 응답 받았어요!");
    // 정상 응답
    return response;
  },

  function (error) {
    console.log("인터셉트 응답 못받았어요...ㅠㅠ");
    return Promise.reject(error);
  }
);

export default instance;

 

interceptors 결과 예시 이미지

---

 

interceptors를 이용해 요청과 응답 사이를 관여해 할 수 있는 일들

• 요청 시, content-type 적용
• token 등 인증 관련 로직 적용
• 서버 응답 코드에 대한 오류 처리(controller)
• 통신시작 및 종료에 대한 전역 상태를 관리하여 spinner, progress bar 등 구현 가능

 content-type 

Axios를 사용하여 HTTP 요청을 보낼 때, 요청의 Content-Type은 보내는 데이터가 어떤 유형인지 서버에 알려주는 역할을 한다 Axios의 요청 구성에 headers 옵션을 사용하여 Content-Type을 설정할 수 있다

기본적으로 Axios는 JSON 형식의 데이터를 전송할 때 Content-Type: application/json 헤더를 사용하며
파일 업로드 시  Content-Type: multipart/form-data 형식으로 입력하는 등 데이터 유형에 따라 입력값이 다르다