Axios 사용법

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

• 공식 문서에 따르면 axios 는 위와 같이 인스턴스 형식으로 만들어서 공통적으로 여러 컴포넌트에서 import 하여 사용 가능

• 위와 같이 api 변수에 axios 로 만든 인스턴스를 담음

• 인스턴스에는 기본 default 엔드포인트 경로와, default로 headers 에 담겨서 보내질 값을 지정 가능

• 이후 해당 api 를 다른 컴포넌트에서 import 하여 위와 같이 사용 가능

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

• 위와 같이 axios 전역의 default 설정을 명시도 가능

• 특정 로직 처리 후 axios 요청에 무언갈 담아서 보내거나, 기본값을 변경 시 활용 가능

const instance = axios.create({
  baseURL: 'https://api.example.com'
});
 
// Instance를 만든 후  defalut 값을 수정
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
instance.defaults.timeout = 2500;

• 이 전역 설정은 인스턴스 생성 방식에도 활용 가능

axios 인터셉터

// 요청 인터셉터 추가하기
axios.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

• axios 는 인터셉터 (일종의 미들웨어) 기능을 제공함

• 요청을 받거나 응답을 보내기 전 이를 가로채서 특정한 로직을 실행하도록 구현 가능
  
  
  
  

• 관련 정리 블로그 글

• axios 공식 Docs