액시오스(Axios)는 현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리입니다. 뷰 리소스 라이브러리를 공식 라이브러리에서 제외하면서 액시오스를 언급했습니다. 액시오스는 깃허브 리포리토리의 별이 3만 개가 넘는데, 이는 뷰 리소스의 8천 개에 비해 압도적으로 많습니다. 그만큼 많은 개발자들이 관심을 갖고 이용하고있습니다.
또한 액시오스는 Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있습니다.
|
API 유형
|
처리 결과
|
|
axios.get('URL 주소').then().catch()
|
해당 URL 주소에 대해 HTTP GET 요청을 보냅니다. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고, 데이터를 받아올 때 오류가 발생하면 catch()에 정의한 로직이 수행됩니다.
|
|
axios.post('URL 주소').then().catch()
|
해당 URL 주소에 대해 HTTP POST 요청을 보냅니다. then()과 catch()의 동작은 위에서 살펴본 내용과 동일합니다.
|
|
axios({ 옵션 속성 })
|
HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있습니다. 데이터 요청을 보낼 URL, HTTP 요청 방식, 보내는 데이터 유형 등등
|
앞에서 설명한 사용 방법 중 GET 요청을 하는 API로 간단히 데이터를 요청해서 받아와 콘솔에 출력하는 실습을 해보겠습니다.
위 코드는 뷰 리소스 실습 예제와 마찬가지로 [프레임워크 목록 가져오기] 버튼을 클릭해서 HTTP GET 요청을 보내고 데이터를 받아와서 로그에 출력하는 예제입니다. 이전 예제 코드와 비교하면 라이브러리를 로딩해 오는 CDN의 주소와 GET 요청을 보내는 API 형식 부분만 다릅니다.
response 객체를 확인해 보면 data 속성이 일반 문자열 형식이 아니라 객체 형태이기 때문에 별도로 JSON.parse()을 사용하여 객체로 변환할 필요가 없습니다. 이런 부분들이 뷰 액시오스가 뷰 리소스보다 사용성이 좋다는 것을 증명합니다.
뷰의 HTTP 통신 라이브러리인 뷰 리소스와 액시오스에 대해 살펴 보았습니다. 라이브러리에서 제공하는 API를 이용하여 간편하게 HTTP 통신을 구현할 수 있고, 원하는 데이터를 서버에서 끌어다가 화면으로 가져올 수 있다는 것을 확인했습니다.
'Vue' 카테고리의 다른 글
| 뷰 CLI 설치, 프로젝트 생성 (0) | 2023.10.20 |
|---|---|
| 뷰 템플릿, 데이터 바인딩 (0) | 2023.10.20 |
| 네스티드 라우터, 네임드 뷰 (0) | 2023.10.20 |
| 라우터 (0) | 2023.10.20 |
| props 속성 (0) | 2023.10.20 |