[Javascript] axios의 개념, 기본 예제

aixos란 Nodejs 혹은 브라우저를 위한 프로미스 기반의 HTTP 비동기 통신 라이브러리이다.

즉 HTTP 요청을 처리할 수 있는 기능이다. jQuery의 ajax랑 유사한 개념인듯하다.

 

axios 설치

npm -> npm install axios

 

aixos의 간단 예제를 테스트하려면

영화 검색 사이트를 만들기에 좋은 데이터베이스를 제공해주는 OMDb API에서 API KEY 인증이 필요하다.

 >> http://www.omdbapi.com/

 

 

// aixos 를 사용하기 위해 import
import axios from 'axios'

// 영화정보를 가져오는 함수 작성
function getMovieInfo(){
  const APi_KEY = '비공개'		

  axios
    .get(`https://www.omdbapi.com/?apikey=${API_KET}&s=frozen`)
    .then(res => {
      console.log(res)
      const h1El = document.querySelector('h1')
      const imgEL = document.querySelector('img')
      h1El.textContent = res.data.Search[0].Title
      imgEL.src = res.data.Search[0].Poster
    })
}
getMovieInfo();

aixos.get(url)로 호출하고, 
then 받아온 데이터를 html 태그에 추가해서 간단하게 확인해 볼 수 있는 예제다.

post방식, 타이틀, 연도 등 검색 방법 추가는 추후 다루어 볼예정이다.