[비동기통신] 비동기 요청을 쉽고 간결하게 처리해주는 라이브러리 Axios

Axios 란?

• Javascript 및 Node.js에서 사용되는 브라우저 및 서버에서 HTTP 요청을 처리하는데 사용 되는 라이브러리
• Promise(ES6) 기반의 api를 제공하여 비동기 요청을 더 쉽고 간결하게 처리할 수 있도록 도와준다.

 

Axios 주요 특징

• Promise 기반
  - Axios는 비동기 작업을 처리하는데 'Promise'를 사용한다. 이를 통해 비동기 코드의 관리와 에러 처리하는 핸들링이 간편해진다.
• 요청와 응답 인터셉터
  -Axios는 요청과 응답을 인터셉트하고 수정하는 기능을 제공하여 요청/응답, 로깅, 헤더 수정, 오류 처리 등의 작업을 수행 할 수 있다.
• 자동 JSON 변환
  - 응답 데이터를 자동으로 JSON형태로 변환해주기 때문에, JSON 데이터를 쉽게 다룰 수 있다.
  
  
• 요청 취소
  - 요청을 취소하는 기능을 제공하기 때문에 비동기 요청이 더이상 필요하지 않을때 네트워크 요청을 취소 할 수 있다.
  
  
• 요청/응답 중단
  - 요청이나 응답하는 중간에 중단하고 다른 요청을 만들 수 있는 기능을 제공한다.
  
  
• CSRF 보호
  -브라우저 환경에서 자동으로 CSRF(Cross-Site Request Forgery) 보호를 위한 쿠키와 헤더 설정을 지원한다.

 

Axios 기본 사용법 예제 (GET 요청)

1. Axios 설치

// 1. npm 모듈을 사용하여 설지
npm install axios

// 2. cdn url 사용
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

 

2. Axios 사용

import axios from 'axios' 
// 또는 const axios = require('axios');


axios.get('통신할url').then( (response) => {
	console.log(response.data);
}).catch( (error) => {
	consol.log(error);
});

위의 예제에서 'axios.get()' 메서드를 사용하여 통신할 URL로 GET요청을 보내고 'then()', 'catch()' 메서드를 사용하여 각각 응답과 에러를 처리 할 수 있다. 'async'키워드 및 async함수 내에서만 사용되는 'await'키워드와 함께 사용하면 비동기 코드를 더 간결하게 작성 할 수 있다.