JavaScript
[JS] JavaScript | Axios | OMDB API로 영화데이터 가져오기
Toproot
2021. 8. 11. 08:52
728x90
728x90
📒 OMDB API란?
- OMDb API는 영화 정보를 얻기 위한 RESTful 웹 서비스이며
- 사이트의 모든 콘텐츠와 이미지는 사용자가 제공하고 유지 관리합니다.
📒 사용방법
Usage
- Send all data requests to :
- http://www.omdbapi.com/?apikey=[yourkey]&
- Poster API requests:
- http://img.omdbapi.com/?apikey=[yourkey]&
📒 Query String
- Query : 검색
- String : 문자 데이터
- 주소?속성=값&속성=값&속성=값
📒 Axios로 가져오기
- Promise based HTTP client for the browser and node.js
- ⇒ HTTP요청을 처리해주는 JS 패키지
- 설치
npm install axios
- 영화 Frozen 정보가져오기
import axios from 'axios'
function fetchMovies() {
// apikey = 발급받은 키, s = 영화제목
// https로 요청하기.
axios
.get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen') // 메소드체이닝으로 작성
.then(res => { // 콜백
console.log(res)
const h1El = document.querySelector('h1')
const imgEl = document.querySelector('img')
h1El.textContent = res.data.Search[1].Title
imgEl.src = res.data.Search[1].Poster
})
}
fetchMovies()
728x90
728x90