Axios 이상하게 동작할 때 해결법

개요

axios 의 버그인지, 아니면 라이브러리끼리의 충돌인지 하여튼, axios 리턴 객체가 문서상의 객체와 다른 원인 불명의 문제를 해결하는 글입니다. axios 그 자체에 대한 설명은 다른 글에도 많으니 참고해주시기 바랍니다.

문제

갑자기 axios가 이상하게 동작했습니다. 원래 요청을 받으면 AxiosResponse 로 받게 됩니다. Typescript 타입 정의를 보니 아래와 같이 되어 있었습니다.

export interface AxiosResponse<T = any>  {
  data: T;
  status: number;
  statusText: string;
  headers: any;
  config: AxiosRequestConfig;
  request?: any;
}

그런데 말입니다, node.js 에서 axios 를 사용하려고 하니까 저 객체가 튀어나오지 않고 곧바로 data 값이 튀어나오는 겁니다. 그러니까 본래는 다음과 같이 접근했어야 했던 것들이

const res = await axios.get('https://something.com');
const data = res.data;

아래와 같이 접근해야 정상적으로 동작했습니다.

const data = await axios.get('https://something.com');
console.log(data); // 본래 res.data 로 접근해야 하는 것들이 들어가있음.
const res = await axios.get('https://something.com');
const what = res.data; // undefined

이게 도대체 무슨 일이란 말입니까 !! ㅠㅠ.. 코드의 일관성을 유지하기 위해 이 프로그램에서만 특이한 방법으로 사용할 수도 없는 노릇이었습니다. 왜 이런 문제가 터지는지 전혀 모르겠지만 하여튼 문제를 해결해봅시다.

해결법

그냥 axios 인스턴스를 새롭게 만들어서 그 인스턴스로 요청을 보내면 됩니다. 참 쉽죠? 여전히 찜짐한 구석은 있지만 추후 문제를 전혀 일으키지 않을 코드일 것 같아 우선 이렇게 사용하고자 합니다.

const customAxios = axios.create({});
const res = await customAxios.get('https://something.com');
const data = res.data;
console.log(data); // OK!

실패한 시도 목록

요청 시 transformResponse 옵션에 null, undefined 넣기

뭔가 자동으로 변형되는 게 어디선가 들어가서 되는 게 아닌가 싶었지만 아무런 영향이 없었습니다.

요청 시 http, https 옵션에 새로운 Agent 넣어주기

Agent 와는 관계가 없었습니다.

요청 시 decompress 옵션 false 로 두기

요청 압축과 관련된 옵션인 것 같은데 아무런 관계가 없었습니다.