[JS] Javascript에서 Axios 사용하기

Axios는 Promise 기반의 HTTP 클라이언트로, 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리입니다. 특히, REST API 요청을 간편하게 처리할 수 있도록 다양한 기능을 제공해 많은 개발자들이 선호하는 라이브러리입니다. 이번 포스팅에서는 Axios의 특징과 이를 사용한 API 요청 방법을 알아보겠습니다.

 

 

Axios - 커버 이미지

 

JavaScript에서 Axios를 사용한 API 요청 방법

목차

1. Axios 설치

2. Axios 특징

3. Axios로 API 요청하기

4. Axios 인스턴스

마무리

추천글

 

Axios 설치

1. npm을 통한 설치
   

   npm install axios

2. yarn을 통한 설치
   

   yarn add axios

3. cdn을 통한 설치
   

   // jsdelivr
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   
   // unpkg
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios 특징

Axios는 기본적인 HTTP 요청 외에도 여러 가지 편리한 기능을 제공합니다:

• Promise 기반: 비동기 작업을 위한 간결한 코드 작성이 가능.
• 브라우저 호환성: 브라우저와 Node.js에서 모두 사용 가능.
• 자동 JSON 데이터 변환: 응답 데이터를 자동으로 JSON으로 변환.
• 요청 및 응답 인터셉터: 요청 또는 응답 전에 작업을 수행할 수 있는 인터셉터 제공.
• 취소 토큰 지원: API 요청을 취소할 수 있음.

Axios로 API 요청하기

1. GET 요청

가장 기본적인 API 요청 방식인 GET 요청을 Axios를 통해 쉽게 처리할 수 있습니다.

import axios from "axios";

axios
  .get("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => {
    console.log(response.data);
  })

 

async/awiat을 이용한 방법

import axios from "axios";

async function getResponse() {
  const response = await axios.get("https://jsonplaceholder.typicode.com/posts/1");
  console.log(response.data);
}

 

위 코드는 jsonplaceholder에서 하나의 게시글 정보를 가져오는 GET 요청입니다. 응답 데이터를 자동으로 JSON으로 변환해 주기 때문에 fetch 보다 간결하게 코드를 작성할 수 있습니다.

2. POST 요청

POST 요청은 서버에 데이터를 전달할 때 사용됩니다. Axios는 JSON 데이터를 자동으로 처리해 주기 때문에 추가 설정이 필요하지 않습니다.

import axios from 'axios';

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'New Post',
    body: 'This is the content of the new post',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })

 

async/awiat을 이용한 방법

import axios from 'axios';

async function postData(newData) {
  const response = await axios.post('https://jsonplaceholder.typicode.com/posts', newData);
  console.log(response.data)
}

 

위 코드는 새 게시글을 서버로 전송하는 POST 요청입니다. Axios는 JSON 형식으로 데이터를 전송해 주므로, 별도의 변환 작업이 필요 없기 때문에 fetch 보다 간결하게 코드를 작성할 수 있습니다.

Axios 인스턴스

Axios 인스턴스는 특정 설정을 공유하는 Axios 객체를 생성하여, 매번 API 요청 시 설정을 반복하지 않고 간편하게 일관된 설정을 적용할 수 있는 방법입니다. 이를 통해 베이스 URL, 헤더, 타임아웃 등의 옵션을 한 번 설정해 두고, 여러 API 요청에서 재사용할 수 있습니다.

- Axios 인스턴스 생성

Axios 인스턴스를 생성하기 위해서는 axios.create() 메서드를 사용합니다. 이 메서드는 새 인스턴스를 반환하며, 해당 인스턴스에서 특정 설정을 기본값으로 설정할 수 있습니다.

import axios from 'axios';

const apiInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 1000,
  headers: { 'Authorization': 'Bearer my-token' }
});

 

위 코드는 apiClient라는 Axios 인스턴스를 생성하며, 해당 인스턴스에서 요청할 때마다 다음 설정들이 기본값으로 적용됩니다.

• baseURL: 모든 요청의 기본 URL.
• timeout: 요청 제한 시간 설정.
• headers: 모든 요청에 기본적으로 포함되는 헤더 값.

- Axios 인스턴스 사용

apiClient 인스턴스를 사용하여 API 요청을 수행할 수 있습니다. 이때, 인스턴스에 설정된 기본값이 자동으로 적용됩니다.

// GET 요청
apiClient.get('/posts/1') // Base URL이 설정되어 https://jsonplaceholder.typicode.com 생략
  .then(response => {
    console.log(response.data);
  });

// POST 요청
apiClient.post('/posts', {
    title: 'New Post',
    body: 'This is the content of the new post',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  });

 

apiClient를 통해 Base URL과 타임아웃, 헤더가 자동으로 설정된 API 요청을 쉽게 처리할 수 있습니다.

- Axios 인스턴스 기본 설정 변경

기본 설정은 인스턴스 생성 후에도 변경할 수 있습니다.

apiClient.defaults.timeout = 2000; // 이미 생성된 인스턴스에 동적으로 새로운 설정 적용

 

 

 

 

 

Axios는 간결하고 강력한 HTTP 클라이언트로, 특히 REST API 요청을 효율적으로 처리하는 데 매우 유용합니다. 비동기 작업이 기본이 되는 자바스크립트 개발 환경에서 Axios를 활용하면 더욱 쉽게 API 통신을 구현할 수 있습니다.

 

장점

• 직관적인 API 요청 처리 방식
• Promise 기반으로 비동기 작업이 쉬움
• 자동 JSON 변환 및 응답/요청 기능

단점

 

• 최신 브라우저의 fetch API와 비교해 추가 의존성 발생
• 복잡한 설정이나 기능은 커스터마이징이 필요할 수 있음

 

 

 

추천글

[JS] fetch 함수 - API 호출하기 (GET, POST)

 

[JS] 자바스크립트 비동기 - Promise