이상청 : Axios interceptor, instance 모듈화 통한 api 통신

💙 Axios란

Promise api를 활용하는 http 비동기 통신 라이브러리

 

💙 Axios 선정 이유

1. 간단한 메서드로 요청 타입을 작성해 restful API에 CRUD 요청에 유리함

2. 데이터 전송 시 자동으로 JSON 변환되어 fetch와 달리 JSON.stringify 불필요

3. 별개로 status와 statusText가 별개로 제공되어 철저한 응답 상태 구분/처리 가능 

3. http 요청 가로챌 수 있는 interceptor 기능 제공

 

 

💙 Axios instance 생성

create() 메서드 사용

config 설정 옵션으로 baseURL, headers의 Access-Control-Allow-Origin, withCredentials을 설정함

headers의 Bearer Token 설정은 interceptor 이용해 요청 전 상황에 대한 에러 핸들링 코드와 같이 있도록 함

 

cf) dev와 prod 구분해 BASE_URL 설정 가능

// production 환경과 develop 환경에 따른 BASE_URL 부여 코드
export const BASE_URL: { [key: string]: string } = {
  development: '~~~',
  production: '~~~',
};

// 부여된 BASE_URL에 따른 axios instance 생성
axios.create({
  baseURL: BASE_URL[process.env.NODE_ENV] || BASE_URL.development,
});

 

1. serverAxios : 인증이 불필요한 api 통신에 사용됨

2. privateAxios : Token Bearer 인증이 필요한 api 통신에 사용됨

해당 axios 인스턴스 생성과 동시에 토큰 값으로 localStorage에서 값을 가져오는 방식 X

해당 axios interceptor-request에서 정상인 상황인 경우에만 localStorage에서 값을 가져와 header로 설정되도록 함

 

💙 Axios http 요청 모듈화

1. 디렉토리 관리 및 api 요청 함수 작성 구조

 

 

 

 

1. index.js : axios 인스턴스 생성

2. ****.apis.js : api 요청 prefix 따라 호출 함수 모아 함수 작성

 

 

 

 

 

 

예시) Vote.apis.js 내에는 vote 관련 api 호출 함수 존재

const prefix = api/v1/votes

 

모든 투표 목록 불러오는 api :

get : ${prefix}

 

특정 투표에 대해 찬반 투표하는 api:

post : ${prefix}/yesorno

 

특정 유저가 특정 투표에 대한 투표 여부와 해당 투표 결과 보이는 api :

get : ${prefix}/yesorno?userId=${userId}&votePostId={votePostId}

 

 

💙 Axios interceptor 이용한 request, response 커스텀

1. request 설정 : api 요청하기 성공 직전, 에러 직전 가로채기

2. response 설정 : api 응답 받고 이에 대한 then, catch 처리 직전 가로채기 

// 요청 인터셉터 추가
axios.interceptors.request.use(
  function (config) { 
    // config에는 axios요청시 입력한 config가 들어있습니다.
    // config를 가공해서 요청하는 것이 가능합니다 !
    // 요청을 보내기 전에 수행할 일
    // ...
    return config;
  },
  function (error) {
    // 오류 요청을 보내기전 수행할 일
    // ...
    return Promise.reject(error);
  });

// 응답 인터셉터 추가
axios.interceptors.response.use(
  function (response) {
    // 응답 데이터를 가공
    // ...
    return response;
  },
  function (error) {
    // 오류 응답을 처리
    // ...
    return Promise.reject(error);
  });

해당 프로젝트에서는 Bearer Token 인증/accessToken이 필요한 axios에 대해서만 interceptor을 사용함

 

요청 직전 처리 :

헤더에 Bearer Token 지정

응답 직전 처리 :

accessToken 만료로 인해 응답 catch 발생 전 refresh 토큰을 받아와 다시 헤더 설정해줌

비정상적인 로그인 상태와 bearer token 사용 api에 비정상적인 응답에 대해 특정 페이지로 이동해 유저의 정상적인 행동 유도

 

 

💙 커스텀 훅 + Axios interceptor 커스텀한 axios instance 사용

1. usePrivateAxios 훅 작성

2. usePrivateAxios 훅을 통해 컴포넌트에서 해당 axios instance 사용

3. 컴포넌트에 훅으로 전달받은 axios instance 사용해 api 통신