Axios
- JavaScript의 HTTP 웹 통신을 위한 라이브러리
- 확장 가능한 인터페이스와 쉽게 사용할 수 있는 비동기 통신 기능을 제공
- node 환경은 npm을 이용해서 설치 후 사용할 수 있고,
browser환경은 CDN을 이용해서 사용할 수 있음 - Axios 공식문서 및 github
Axios 기본구조
Axios 사용해보기
- get, post 등 여러 method 사용가능
- then을 이용해서 성공하면 수행할 로직을 작성
- catch를 이용해서 실패하면 수행할 로직을 작성
- Python의 try,except랑 비슷함
고양이 사진 가져오기
- The Cat API (https://api.thecatapi.com/v1/images/search)
- 이미지를 요청해서 가져오는 작업을 비동기로 처리
고양이 사진 가져오기 (Python 동기)
import requests # pip install requests print('고양이는 야옹') cat_image_search_url = 'https://api.thecatapi.com/v1/images/search' response = requests.get(cat_image_search_url) if response.status_code == 200: print(response.json()) else: print('실패했다옹') print('야옹야옹')
고양이 사진 가져오기 (JavaScript)
<body> <button>야옹아 이리온</button> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> console.log('고양이는 야옹') const catImageSearchURL = 'https://api.thecatapi.com/v1/images/search' // 버튼 가져오기 const btn = document.querySelector('button') // 버튼 누르면 요청함 btn.addEventListener('click', function() { axios.get(catImageSearchURL) .then((response) => { // console.log(response.data) // console.log(response.data[0].url) imgElem = document.createElement('img') imgElem.setAttribute('src',response.data[0].url) document.body.appendChild(imgElem) }) .catch((error) => { console.log('실패했다옹') }) console.log('야옹야옹') }) </script> </body>
- 결과 비교
- 동기식 코드는 위에서부터 순서대로 처리가 되기때문에 첫번째 print가 출력되고 이미지를 가져오는 처리를 기다렸다가 다음 print가 출력되는 반면
- 비동기식 코드는 바로 처리가 가능한 작업은 바로 처리하고, 오래 걸리는 작업인 이미지를 요청하고 가져오는 일은 요청을 보내놓고 기다리지 않고 다음 코드로 진행 후 완료가 된 시점에 결과 출력이 진행됨
- 정리
- axios는 비동기로 데이터 통신을 가능하게 하는 라이브러리
- 같은 방식으로 우리가 배운 Django REST API로 요청을 보내서 데이터를 받아온 후 처리할 수 있음
