-
JS 자세히 알아보기 (영화 포스터 출력하기)JavaScript/JavaScript 2021. 6. 9. 02:46
Query String
주소?속성=값&속성=값
Axios
브라우저 및 node.js 용 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
영화 포스터 출력하기
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script defer src="./main.js"></script> </head> <body> <h1>Hello World!</h1> <img src="" alt="" width="200"> </body> </html>import axios from 'axios' // omdbapi 활용 function fetchMovies() { 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[0].Title imgEl.src = res.data.Search[0].Poster }) } fetchMovies()
참조
https://github.com/axios/axios
axios/axios
Promise based HTTP client for the browser and node.js - axios/axios
github.com
'JavaScript > JavaScript' 카테고리의 다른 글
비동기 - 예외 처리 (0) 2021.08.03 비동기 - 콜백과 프로미스 객체의 이해 (0) 2021.08.03 JS 자세히 알아보기 (Storage) (0) 2021.06.09 JS 자세히 알아보기 (JSON) (0) 2021.06.08 JS 자세히 알아보기 (lodash) (0) 2021.06.07