그만 둬요 제발. 사실 제가 했습니다. 죄송합니다. 실수에요. 근데 정말 어 할만한 상황이었어요. 들어보세요.
1. 문제의 발단
- axios response type을 'Blob'으로 받아 서버에서 엑셀 다운로드를 가능하게 하는 API를 연결하는 작업을 하고 있었다.
- 받는 타입을 Blob으로 해야 브라우저의 다운로드 기능까지 연결되어 처리가 가능하다.
- 기능은 원하는 방향으로 잘 작동하나 문제는 에러가 났을 경우이다.
- response도 blob 형식으로 온다. 그래서 서버와 합의한 error code를 뽑아 상황에 맞는 에러 처리가 되지 않았다.
- 액세스 토큰이 만료되었을 때, axios 인스턴스에 설정해 놓은 대로 reissueToken이 안 되는 현상을 발견하여 확인해 보니, 토큰 만료 시 나오는 에러 code를 잡지 못하고 있었다.
2. 처음 상황
export async function getData() {
return await axiosInstance.get(`${baseURLV3}/data`, {
responseType: 'blob',
});
}
- 위와 같이 api를 호출하는 코드를 만들어 놓은 상황
- 에러가 날 경우 Blob 객체 형태로 error를 받음
3. 해결법
export async function getData() {
return await axiosInstance.get(`${baseURLV3}/data`, {
responseType: 'blob',
});
}
...
catch(err) {
const errorResponse = JSON.parse(await err.response.data.text());
if(errorResponse.code === '토큰이 만료 되었을 때 나는 에러 코드') {
return reissueToken()
} else {
return console.log('is not token issue')
}
}
- JSON.parse(await error.response.data.text()); 으로 다시 처리하면 우리가 알던 방식 그대로 error의 형태를 바꿀 수 있다.
- 대신, 비동기로 작동한다는 것!