LIME

공부하고 기록하는 블로그

3 분 소요

Axios란?

공식 문서에도 적혀있듯이 Axios는 Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. JavaScript에서 클라이언트와 서버 간 데이터를 주고받기 위해서 사용하는 비동기 HTTP 통신 방법 중에서는 Axios 뿐만 아니라 Ajax, Fetch 등이 있는데요. 제가 앞서 사용해보았던 Ajax는 보통 jQuery를 사용하여 보다 쉽게 요청을 처리 할 수 있지만 Promise 기반의 통신 기술이 아니었습니다. Axios 는 Promise(ES6) 기반 HTTP 통신 라이브러리이며 크로스 브라우징 최적화로 브라우저간 호환성이 뛰어난데요. 설치가 필요하다는 점만 빼면 Fetch 대비 편의성도 좋아서 통상적으로 React나 Vue.js와 같은 프론트 프레임워크를 사용할때는 Axios를 주로 사용합니다.

Axios vs Fetch

보통 자바스크립트에서는 원래 Fetch를 주로 사용했다고 하는데, 아무래도 built-in 라이브러리 특성상 기능면에서 Axios대비 부족함이 있어서 요즘은 Axios의 선호도가 더 높다고 합니다.

Axios Fetch
써드파티 라이브러리로 설치가 필요 현대 브라우저에 빌트인이라 설치 필요 없음
XSRF 보호를 해준다 별도 보호 없음
data 속성을 사용 body 속성을 사용
data는 object를 포함한다 body는 문자열화 되어있다
status가 200이고 statusText가 ‘OK’이면 성공이다 응답객체가 ok 속성을 포함하면 성공이다
자동으로 JSON데이터 형식으로 변환된다 .json()메서드를 사용해야 한다.
요청을 취소할 수 있고 타임아웃을 걸 수 있다. 해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음 기본적으로 제공하지 않음
download진행에 대해 기본적인 지원을 함 지원하지 않음
좀더 많은 브라우저에 지원됨 Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

Axios 설치 방법

1

npm install axios

Axios는 위와 같이 npm으로 간단하게 설치할 수 있습니다.

Axios 문법

1
2
3
4
5
6
7

axios({
  url: 'http://localhost:3000', // 통신할 웹문서
  method: 'get', // 통신 방식
  data: { // 보낼 데이터
    foo: 'hello'
  }
})

Axios 요청(request) 파라미터 옵션

자주 사용하는 옵션은 상단에 표시 및 위치하고 있습니다.
대부분의 내용은 ‘인파_‘님 블로그(https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9)에서 가져왔습니다.

  • method : 요청 방식으로 기본값은 get입니다.
  • url : 서버 주소
  • headers : 요청 헤더
  • data : 요청 방식이 ‘PUT’, ‘POST’, ‘PATCH’에 해당하는 경우에 body에 보내는 데이터
  • params : URL 파라미터 (?key=value로 요청하는 url get 방식을 객체로 표현 한 것)
  • responseType : 서버가 응답해주는 데이터의 타입 지정 (arraybuffer, documetn, json, text, stream, blob)
  • withCredentials : cross-site access-control 요청을 허용 유무. 이를 true로 하면 cross-origin으로 쿠키값을 전달 할 수 있습니다.
  • baseURL : URL을 상대경로로 쓰는 경우에 URL 맨 앞에 붙는 주소
    ex) URL이 /post이고 baseURL이 https://some-domain.com/api/ 이면 https://some-domain.com/api/post 로 요청이 가게 됩니다.
  • timeout : 요청 timeout이 발동 되기 전 milliseconds의 시간을 요청합니다. timeout 보다 요청이 길어진다면, 요청은 취소되게 됩니다.
  • responseEncoding : 디코딩 응답에 사용하기 위한 인코딩 (utf-8)
  • transformRequest : 서버에 전달되기 전에 요청 데이터를 바꿀 수 있습니다.
    • 요청 방식 ‘PUT’, ‘POST’, ‘PATCH’, ‘DELETE’ 에 해당하는 경우에 이용 가능합니다.
    • 배열의 마지막 함수는 string 또는 Buffer, 또는 ArrayBuffer를 반환합니다.
    • header 객체를 수정 가능합니다.
  • transformResponse : 응답 데이터가 만들어지기 전에 변환 가능
  • auth : HTTP의 기본 인증에 사용합니다. auth를 통해서 HTTP의 기본 인증이 구성이 가능합니다.
  • maxContentLength: http 응답 내용의 max 사이즈를 지정하도록 하는 옵션입니다.
  • validateStatus : HTTP응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정하도록 하는 옵션입니다.
  • maxRedirects : node.js에서 사용되는 리다이렉트 최대치를 지정합니다. httpAgent / httpsAgent : node.js에서 http나 https를 요청을 할때 사용자 정의 agent를 정의하는 옵션입니다.
  • proxy : proxy서버의 hostname과 port를 정의하는 옵션입니다.
  • cancelToken : 요청을 취소하는데 사용되어 지는 취소토큰을 명시합니다.

Axios 응답 스키마

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  data: {}, // 서버가 제공한 응답(데이터)
 
  status: 200, // `status`는 서버 응답의 HTTP 상태 코드
  
  statusText: 'OK',  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지
 
  headers: {},  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공
 
  config: {}, // `config`는 요청에 대해 `axios`에 설정된 구성(config)
 
  request: {}
  // `request`는 응답을 생성한 요청
  // 브라우저: XMLHttpRequest 인스턴스
  // Node.js: ClientRequest 인스턴스(리디렉션)
}

Axios 단축 메소드

axios 를 편리하게 사용할 수 있게하는 메소드입니다. (Ajax에서 $.get()이나 $.post() 같은 느낌)

1
2
3
4
5
6
7
8

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

Axios 기본 사용법

  • 기본 사용법
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const axios = require('axios')

// ID로 사용자 요청
axios
  .get('/user?ID=12345')
  // 응답(성공)
  .then(function(response) {
    console.log(response)
  })
  // 응답(실패)
  .catch(function(error) {
    console.log(error)
  })
  // 응답(항상 실행)
  .then(function() {
    // ...
  })
  • async와 await을 사용하여 보기 좋아진 코드
1
2
3
4
5
6
7
8

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345')
    console.log(response)
  } catch (error) {
    console.error(error)
  }
}

Today I Learned

오늘은 Axios에 대해 공부했습니다. 기본적인 사용 방법을 알게 되었고, 빌트인으로 fetch가 있어도 Axios가 기능이 다양해서 선호된다는 것도 알게되었습니다. 앞으로 사용하게 될 일이 많을 것 같은데 생각보다 활용하는 방법이 무궁무진 한 것 같아서 잘 정리해놓고 활용해봐야겠습니다 :)

참고사이트

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)

댓글남기기

참고