데이터 패칭 라이브러리 - Axios (4. 옵션과 인스턴스)

eeensu·2024년 7월 12일

목록 보기

8/16

Axios의 옵션 (AxiosRequestConfig type)

AxiosRequestConfig는 axios 요청을 구성할 때 사용되는 설정 객체의 타입이다.

url
요청을 보낼 URL

axios({
  url: 'https://api.example.com/data',
  method: 'get'
});

baseURL
요청 URL 앞에 추가되는 기본 URL
method
HTTP 메서드 (GET, POST, PUT, DELETE 등, default는 GET)

headers (AxiosRequestHeaders)
요청 헤더 (객체 형태)

axios({
  url: 'https://api.example.com/data',
  method: 'post',
  headers: {
    'Content-Type': 'application/json'
  }
});

params (any)
쿼리 매개변수를 객체 형태로 전달한다. params 옵션을 사용하지 않고도, URL 경로에 ?와 &를 결합하여 쿼리 매개변수를 추가하는 방식으로도 사용할 수 있다.
```
 axios.get({
   url: 'https://api.example.com/search',
   params: {
     query: '1'
   }
 }); 

 또는

 axios({
   url: `https://api.example.com/search?query=1`,
 }); 
```
data (any)
요청 본문 데이터 (객체 또는 문자열 형태)이며, post 나 put 과 같은 요청 메소드를 사용할 때 서버로 보낼 데이터를 설정
```
axios({
  url: 'https://api.example.com/users',
  method: 'post',
  data: {
    username: 'johndoe',
    password: '123456'
  }
});
```
timeout (number)
요청 타임아웃 시간(ms)으로, 시간내에 완료되지 않으면 중단되도록 설정
timeoutErrorMessage (string)
시간 초과 시 표시할 오류 메시지
withCredentials (boolean)
크로스 도메인 요청 시 자격 증명(쿠키, 인증헤더) 전송 여부 (true 또는 false). 대부분의 경우 true로 설정
transformRequest (AxiosTransformer | AxiosTransformer[])
요청 데이터를 변경할 수 있는 함수 또는 함수 배열
transformResponse (AxiosTransformer | AxiosTransformer[])
응답 데이터를 변경할 수 있는 함수 또는 함수 배열

onUploadProgress 및 onDownloadProgress
데이터 업로드 및 다운로드 진행 상황을 추적할 수 있는 콜백 함수

axios({
  url: 'https://api.example.com/upload',
  method: 'post',
  data: formData,
  onUploadProgress: (progressEvent) => {
    console.log(`Uploaded: ${Math.round((progressEvent.loaded * 100) / progressEvent.total)}%`);
  }
});

paramsSerializer
기본적으로 Axios는 URLSearchParams를 사용하여 쿼리 매개변수를 직렬화한다. 그러나 특정 요구사항에 맞게 쿼리 매개변수를 직렬화해야 하는 경우, paramsSerializer 옵션을 사용하여 이를 커스텀할 수 있다.
- ParamsSerializerOptions 옵션, indexes: boolean 의 속성은 배열 매개변수를 직렬화할 때 인덱스를 포함할지 여부를 설정
- paramsSerializer 함수, 간단하게 쿼리 매개변수 직렬화 방식을 설정할 수 있음
```
const qs = require('qs');
   axios({
    url: 'https://api.example.com/data',
    params: {
      names: ['john', 'doe']
    },
    paramsSerializer: params => qs.stringify(params, { arrayFormat: 'indices' })
  });
```
  위와 같이 하면 "names[0]=john&names[1]=doe 와 같은 형태로 변환된다.

httpAgent (any) / httpsAgent (any)
- http / https 요청 에 사용할 사용자 정의 에이전트

이외에도 많은 옵션들이 있으며, 자세한 옵션들은 https://axios-http.com/docs/req_config 에서 확인할 수 있다.

Config의 우선 순위

Config는 우선 순위에 따라 병합된다. lib/defaults.js 라이브러리에서의 기본값, 인스턴스의 defaults 속성, 개별 요청의 config 인자를 순서대로 우선순위를 가진다. 아래의 예시로 이해해보자.

// 라이브러리에서 제공하는 config 기본값을 사용하여 인스턴스 만들기
// 이 때 timeout 값은 라이브러리의 기본값인 '0'
const instance = axios.create();

// 라이브러리에 대한 timeout 값 재정의
// 이제 모든 요청은 시간 초과 전 2.5초 대기하는 인스턴스를 사용
instance.defaults.timeout = 2500;

// 시간이 오래 걸리는 요청에 대한 timeout 값 재정의. 해당 경로의 요청은 5초로 재정의 된다. 
// 나머지 경로는 2.5초 그대로
instance.get('/longRequest', {
  timeout: 5000
});

AxiosInstance

AxiosInstance는 새로운 Axios 인스턴스를 생성할 때 사용된다. 이 인스턴스는 기본 설정을 포함하여 HTTP 요청을 보낼 수 있으며, 각 인스턴스는 독립적으로 설정 및 사용할 수 있다. 이를 통해 공통 설정을 적용한 Axios 인스턴스를 여러 개 생성하여 코드의 재사용성을 높일 수 있다.

import React, { useEffect } from 'react';
import axios, { AxiosInstance, AxiosResponse, AxiosError } from 'axios';

// Axios 인스턴스 생성
const api: AxiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
    // 다른 공통 헤더 추가 가능
  },
});

const ExampleComponent = () => {
  
  useEffect(() => {
    // Axios 인스턴스를 사용한 GET 요청
    api.get('/posts/1')
      .then((response: AxiosResponse) => {
        console.log('Data from server:', response.data);
      })
      .catch((error: AxiosError) => {
        console.error('Request failed:', error);
      });
  }, []); // 빈 배열은 컴포넌트가 마운트될 때 한 번만 실행되도록 보장

  return (
    <div>
      <h1>React Axios Instance Example</h1>
      {/* 컴포넌트 내용 */}
    </div>
  );
};

export default ExampleComponent;

eeensu

안녕하세요! 프론트엔드 개발자입니다! (2024/03 ~)

이전 포스트

데이터 패칭 라이브러리 - Axios (3. patch, put, delete)

다음 포스트

데이터 패칭 라이브러리 - Axios (4. 옵션과 인스턴스)