[Vue.js] axios 라이브러리를 사용한 API 호출

[axios]

프로젝트를 하다 보면... 특히 협업을 하다 보면 서버와 통신할 일이 자주 생깁니다.

통신하는 방법이 여러 가지가 있는데요. 그중 axios 라이브러리를 통해 통신하는 방법을 알아보겠습니다!

 

axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리입니다.

Vue에서만 사용할 수 있다.. 이런 건 아니라는 의미죠!

 

https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

[axios 사용방법]

1. 먼저 axios를 설치합니다. 설치하는 방법은 여러 가지가 있으므로 하나를 선택하시면 됩니다.

• npm 사용

npm install axios

• yarn 사용

yarn add axios

• bower 사용

bower install axios

2. Vue 컴포넌트에서 axios를 import합니다.

import axios from 'axios';

3. API를 호출하고 데이터를 가져오는 메서드를 생성합니다.

methods: {
	fetchData() {
    	axios.get('통신할 url 주소')
            .then(response => {
                // 통신한 데이터 저장
                this.data = response.data;
           })
           .catch(error => {
                console.error(error);
            });
    }
}

4. 컴포넌트 라이프사이클 후킹에서 생성한 메서드를 호출합니다. 게시판을 예로 들어볼까요? 화면에 들어오자마자 게시판에 존재하는 게시글을 불러와야 하기 때문에 mounted에서 호출하겠습니다.

mounted() {
	this.fetchData();
}

[axios 주의할 점]

axios 라이브러리를 사용하여 API 통신을 할 때 주의할 점이 있습니다.

 

✅ 에러 처리

axios를 사용할 때 API 요청 중에 오류가 발생할 수 있습니다. 이를 예외 처리하기 위해 .catch 블록을 사용할 수 있습니다.

axios.get('통신할 url 주소')
            .then(response => {
                // 통신한 데이터 저장
                this.data = response.data;
           })
           .catch(error => {
                console.error(error);
            });

 

✅ CORS(Cross-Origin Resource Sharing)

브라우저에서 다른 도메인의 API를 호출할 때 CORS 문제가 발생할 수 있습니다.

서버 측에서 CORS를 허용하도록 설정하거나, 프록시 서버를 사용하여 문제를 해결할 수 있습니다.

 

✅ 보안

API 키나 중요한 데이터를 안전하게 다루어야 하므로 중요한 데이터는 노출되지 않도록 보안에 철저해야 합니다.

 

✅ HTTP 요청의 성능적 측면

대용량 파일 다운로드 혹은 대량 데이터 전송과 같이 요청을 하는 데에 성능적으로 영향을 미칠 수 있습니다.

이러한 경우 적절한 설정과 중복으로 호출하지 않는 등의 최적화가 필요합니다.

 

✅ 콜백 지옥

콜백 함수가 중첩된다면 코드의 가독성이 나빠질 수 있습니다. 이를 Promise, async/await를 사용하여 개선할 수 있습니다.

콜백 지옥과 관련하여 추후에 포스팅할 예정입니다.

 

위 주의점을 잘 숙지하고 제대로 처리한다면 대부분의 프로젝트에서 문제없이 API 통신을 할 수 있는 라이브러리라고 생각합니다..!