[Web] axios란? - 세팅방법 및 사용법

koline·2024년 3월 4일

Web

목록 보기

4/10

axios

일반적으로 javascript에서 HTTP 요청을 보내기 위해 사용하는 라이브러리로 javascript의 내장 라이브러리인 Fetch API, 브러우저가 가지고 있는XMLHttpRequest(XHR) 객체를 사용하는 AJAX 그리고 NodeJS를 위한 라이브러리인 axios가 대표적이다.

이들 모두 promise 기반의 HTTP 클라이언트로써 클라이언트를 이용해 네트워크 요청을 하면 이행(resolve) 혹은 거부(reject)할 수 있는 promise가 반환된다.

하지만 그 중에서 axios가 NodeJS의 라이브러리이기 때문에 제공되는 다양한 편리한 기능으로 인해 React 등 NodeJS 프론트엔드 애플리케이션에서 자주 이용되는 듯 하다.

설치하기

# yarn 사용할 경우
$ yarn add axios

# npm 사용할 경우
$ npm i axios

사용법

기본적인 사용법은 fetch나 AJAX와 크게 다르지 않다.

import axios from "axios";

// GET 요청
axios.get(url, [, config])

// POST 요청
axios.post("url주소",{
  data
},[,config])

// PATCH 요청
axios.patch(url[, data[, config]])

// PUT 요청
axios.put(url[, data[, config]])

// DELETE 요청
axios.delete(url,[, config]);

위 예시에서 config 부분에는 HTTP header 설정과 같은 환경설정이 들어간다.

// GET 요청
const getData = async() => {
	const res = await axios.get('https://localgost:8080/test')
  		.catch((e)=>{console.log(e)})
    
    return res.data;
}

// POST 요청
const postData = async() => {
  await axios.post( 'https://localgost:8080/test', 
    { 
    	id: 'test',
    	data: 'test_data_123'
    }, 
    { 
     headers:{ 
      'Content-type': 'application/json', 
      'Accept': 'application/json' 
    }
  ).catch((e) => { console.log('Error!) });
}