액시오스

뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)입니다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다.

액시오스 설치

프로젝트에 액시오스를 설치하는 방법은 CDN 방식과 NPM 방식 2가지가 있습니다.

CDN 방식

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

NPM 방식

npm install axios

액시오스 사용방법

라이브러리를 설치하고 나면 axios라는 변수에 접근할 수 있게 됩니다. axios 변수를 이용하여 아래와 같이 HTTP GET 요청을 날리는 코드를 작성합니다.

<div id="app">
  <button v-on:click="fetchData">get data</button>
</div>

new Vue({
  el: '#app',
  methods: {
    fetchData: function() {
      axios.get('https://jsonplaceholder.typicode.com/users/')
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
})

위 코드는 get data 버튼을 클릭했을 때 사용자 정보를 받아오는 코드입니다. 실행하면 사용자 정보가 브라우저 개발자 도구의 콘솔에 출력됩니다.

액시오스 응답 제어

.then

비동기 통신이 성공했을 경우, .then()은 콜백을 인자로 받아 결괏값을 처리할 수 있습니다.

.catch

.catch() 를 통해 오류를 처리합니다. error 객체에서는 오류에 대한 주요 정보를 확인할 수 있습니다.

axios.get('/hello')
    .catch(function (error) {
        if (error.response) {
            console.log(error.response.status);
            console.log(error.response.headers);
        }
    }

위와 같이 .catch에서 받아오는 error 객체를 통해 error.response.status 응답 상태코드와 error.response.headers 응답 헤더 정보를 파악할 수 있습니다.

기타 에러 처리 방법은 axios 에러 처리 문서 (opens new window)를 참고합니다.

액시오스 HTTP 요청 메서드 종류

액시오스에서 자주 사용되는 HTTP 요청 메서드를 알아보겠습니다.

axios.get(url[, config])

서버에서 데이터를 가져올 때 사용하는 메서드입니다. 두 번째 파라미터 config 객체에는 헤더(header), 응답 초과시간 (timeout), 인자 값(params) 등의 요청 값을 같이 넘길 수 있습니다.

axios.get('users/1')

axios.post(url[, data[, config]])

서버에 데이터를 새로 생성할 때 사용하는 메서드입니다. 두 번째 파라미터 data에 생성할 데이터를 넘깁니다.

axios.post('/books', { title: '1984' })

axios.put(url[, data[, config]])

특정 데이터를 수정할 때 요청하는 메서드입니다. put 은 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용됩니다. post와의 다른 점은 post는 여러 번 호출할 경우, 새로운 데이터가 지속적으로 추가됩니다. 반면, put은 한 번 요청을 하거나 여러 번 지속적으로 요청해도 결괏값이 동일합니다. 예를 들어, 아래 예시처럼 2번 유저의 이름을 Iron Man으로 수정하기 위해 axios.put 요청을 보냅니다. 이때, put요청을 한 번 보내거나 여러 번 보내도 2번 유저의 이름은 Iron Man으로 동일하게 수정됩니다.

axios.put('users/2', { name: 'Iron Man' })

axios.delete(url[, config])

특정 데이터나 값을 삭제할 때 요청하는 메서드입니다.

axios.delete('books/3')

액시오스 HTTP 요청 Config 옵션

액시오스 요청을 할 때는 config 설정이 가능합니다.

method

method는 요청을 할 때 사용할 요청 메서드입니다. method의 기본값은 get입니다.

url

url은 액시오스 요청에 사용될 서버의 URL을 말합니다.

url: '/books'

method

method는 요청을 할 때 사용할 요청 메소드입니다. method의 기본값은 get 입니다.

method: 'get'

baseURL

baseURL은 액시오스 인스턴스를 생성할 때, 인스턴스의 기본 URL 값을 정할 수 있는 속성입니다. 보통 http://mysite.com/api/v1/처럼 API 서버의 기본 도메인을 설정하고, 인스턴스 별로 URL을 뒤에 추가하여 사용합니다.

baseURL: 'https://도메인.com/api/'

headers

헤더를 수정해서 보내야 한다면 headers를 사용하면 됩니다.

 headers: {'X-Requested-With': 'XMLHttpRequest'}

params

params는 HTTP 요청에 붙일 URL 파라미터를 의미합니다. 예를 들어, 아래 예시 코드는 https://domain.com이라는 URL로 HTTP 요청을 보냈을 때 https://domain.com?id=123으로 전달하는 것과 같은 효과를 가집니다. 여기서 params가 null이나 undefined인 경우에는 파라미터가 조합되지 않습니다.

params: {
    id: 123
}

data

data는 HTTP 요청 보디에 실어서 보낼 데이터를 의미합니다. 주로 데이터를 조작해야 하는 PUT, POST, DELETE, PATCH 등의 메서드에서 사용합니다.

data: {
    firstName: 'Christine'
},
  
// 아래의 data config 설정은 POST 메서드에서만 사용이 가능합니다.

data: 'Age=26&City=New York'

timeout

timeout은 HTTP 요청을 보내고 응답을 받기까지의 제한 시간을 설정하는 속성입니다. 요청 시간이 지정된 값을 초과하면 에러가 발생합니다.

// 단위(millisecond)
timeout: 5000

responseType

responseType은 서버로부터 어떠한 데이터 형식으로 응답받을지 지정하는 것입니다. 옵션으로는 arraybuffer, document, json, text, stream이 가능합니다. 기본 값은 json입니다.

responseType: 'json'

기타 액시오스 요청 Config

Config 옵션은 메서드 별로 사용할 수 있는 옵션이 다르므로, 액시오스 Request Config 문서 (opens new window)를 참고합니다.

기타 액시오스 API

기타 액시오스 관련 예제와 API는 액시오스 문서 (opens new window)를 참고합니다.