[자바스크립트] Axios 라이브러리

 

<!-- axios CDN을 삽입한다. -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Axios 라이브러리

0. 개요

1. Axios 사용해보기

1-1. 고양이 사진 가져오기 - 파이썬으로 요청해보기 (동기)

1-2. 고양이 사진 가져오기 - 자바스크립트 (Axios로 요청) (비동기)

1-3. 고양이 사진 가져오기 (결과 비교) (동기 vs 비동기)

1-4. 고양이 사진 가져오기 (자바스크립트) (완성)

1-5. 정리

Axios 라이브러리

 

0. 개요

• JavaScript의 HTTP 웹 통신을 위한 라이브러리

• 확장 가능하나 인터페이스와 쉽게 사용할 수 있는 비동기 통신 기능을 제공

1. Axios 사용해보기

axios.get('요청할 url')
	.then(성공하면 수행할 콜백함수)
	.catch(실패하면 수행할 콜백함수)
	

• get, post등 여러 method 사용 가능

• then을 이용해서 성공하면 수행할 로직을 작성

• catch를 이용해서 실패하면 수행할 로직을 작성

1-1. 고양이 사진 가져오기 - 파이썬으로 요청해보기 (동기)

import 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('야옹야옹')

• 실행 결과는
  • 고양이는 야옹
  • [{'id': 'dat', 'url': 'https://cdn2.thecatapi.com/images/dat.jpg', 'width': 1024, 'height': 681}]
  • 야옹야옹

• 동기로 실행되므로 순서대로 실행됨

1-2. 고양이 사진 가져오기 - 자바스크립트 (Axios로 요청) (비동기)

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

console.log('고양이는 야옹')
    const catImageSearchURL = 'https://api.thecatapi.com/v1/images/search'
    axios.get(catImageSearchURL)
      .then((response) => {
        console.log(response.data)
      })
      .catch((error) => {
        console.log('실패했다옹')
      })
      console.log('야옹야옹')

• 실행 결과는
  • 고양이는 야옹
  • 야옹야옹
  • [{'id': 'dat', 'url': 'https://cdn2.thecatapi.com/images/dat.jpg', 'width': 1024, 'height': 681}]

1-3. 고양이 사진 가져오기 (결과 비교) (동기 vs 비동기)

• 동기식 코드(파이썬)는 위에서부터 순서대로 처리가 되기때문에 첫번째 print가 출력되고 이미지를 가져오는 처리를 기다렸다가 다음 print가 출력되는 반면

• 비동기식 코드(자바스크립트)는 바로 처리가 가능한 작업(console.log)은 바로 처리하고, 오래 걸리는 작업인 이미지를 요청하고 가져오는 일은 요청을 보내 놓고 기다리지 않고 다음 코드로 진행 후 완료가 된 시점에 결과 출력이 진행됨

1-4. 고양이 사진 가져오기 (자바스크립트) (완성)

<button>야옹아 이리온</button>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></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) => {
      imgElem = document.createElement('img')
      imgElem.setAttribute('src', response.data[0].url)
      document.body.appendChild(imgElem)
    })
    .catch((error) => { 
      console.log('실패했다옹')
    })
    console.log('야옹야옹') 
})

• 버튼 누르면 고양이 사진 가져오는 외부 api 사용

• then을 이용해 성공하면 html에 이미지 추가

• catch를 이용해 실패하면 console.log('실패했다옹')

1-5. 정리

• axios는 비동기로 데이터 통신을 가능하게 하는 라이브러리

• 같은 방식으로 우리가 배운 Django REST API로 요청을 보내서 데이터를 받아온 후 처리할 수 있음