[FE] API 요청 유틸 함수를 axios로 전환

[kamwoo]

요구사항

• 기존의 http 요청 유틸인 request에서 axios로 변경한다.
• 기존의 htttp 응답, 응답Interceptor 사용방식에서 axios interceptor로 변경한다.

동작 테스트

• 권한이 필요한 요청 시 http 메세지 header에 Authorization: [AccessToken] 필드를 추가한다.
• 401 상태코드 응답 intercept
  • tokenStatus가 expired라면 refresh 요청 후 재요청한다.
  • tokenStatus가 Invalid라면 logout한다.

기한

2022.10.28

[kamwoo]

문제점

login 요청 응답으로 accessToken 받아서 useContext에 잘 저장했고, 업데이트 됨에 따라서 axios.interceptor.request.use(onRequest)를 실행시키고
interceptor에 설정도 됐다.
근데 한번더 설정이 바껴서 onRequest가 바뀌지 않았다.

1. useInterceptor를 한번더 실행시키는 것이 아니다.
2. onRequest의 초기값으로 설정이 바뀜
3. 일단 설정이 바꼈는데 다시 바뀐 것

4. userContext가 변경되었을 때 한번밖에 실행되지 않는다.
   

여기에서 생각이 든거 새로 실행을 시키는 것이 아니라 이전에 전달된 onRequest가 실행되는 것
—

axios 내부 로직

instance.interceptor.request.use()를 통해서 handlers에 push한다. axios.ts 파일에 const requestInterceptorChain = [];에서 후입선출로 뒤에서부터 실행시킨다. 때문에 Authorization: [AccessToken] 필드를 헤더에 추가하고, 맨 처음 interceptor에 넣었던 Authorization: [null]을 실행한다.

이 문제를 해결하기 위해서 instance.interceptor.request.clear()를 사용했고, useInterceptor에서 새로운 설정을 넣기 전에 clear시켜준다.

[greenblues1190]

인터셉터에 복수의 핸들러 콜백을 등록할 수 있는 건 몰랐네요. 정리 감사합니다!