axios의 기본 사용법은 fetch와 비슷하다. 다만 json형태를 조금 더 간단하게 받고 이용하기 위해 + syntax의 간편함을 이용하기 위해! 사람들이 axios를 조금 더 많이 이용하는 것이다. axios.get(`api_url`, config) 형태로 우리가 원하는 json 데이터를 받아 사용할 수 있으니 간편하지 않나?
get을 통해 받은 promise 객체를 통해 .then().catch()를 해도 되지만, 역시 await과 try-catch 블락을 통해 데이터 및 에러 핸들링을 하는 것이 가장 간편한 방법인 것 같다.
유데미에서 예시로 보여준, tv show Web API를 이용하여 어떤 키워드를 검색하고, 그 키워드에 맞는 이미지를 출력하는 사이트를 간단히 만들어보도록 하겠다. api의 주소는 다음과 같다.
q=:{tvshow_name}이다.
1. 일단 Axios를 사용하기 위해, axios에서 제공하는 CDN을 head script 태그에 추가하였다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
2. 그리고 기본적으로 사용자에게 원하는 tv show의 이름을 받기 위해 form을 작성했다. form의 id는 search, input의 name은 query이다.
<body>
<h1>TV show search!!!!</h1>
<form id="search">
<input type="text" name="query" placeholder="name of the TV show" />
<button type="submit">submit</button>
</form>
<div id="searched"></div>
<script src="app.js"></script>
</body>
3. form에서 데이터를 받아와 submit 되었을 때 eventListener을 추가하여 api를 이용하기 위한 axios 쿼리를 작성하였다.
const searchForm = document.querySelector("#search");
searchForm.addEventListener("submit", async (e) => {
e.preventDefault();
const userInput = searchForm.elements.query.value;
const config = { params: { q: userInput } };
const res = await axios.get(`http://api.tvmaze.com/search/shows`, config);
printImg(res.data);
searchForm.elements.query.value = "";
});userInput은 말 그대로 유저가 넣은 tv show의 제목이다. configuration 안에 params, 그리고 그 안에 q를 우리가 원하는 유저의 키워드를 넣어준다.
tv show api를 이용할 때엔 아래와 같은 쿼리를 날리라고 제공한 것을 공식 문서에서 확인할 수 있다.(API는 공식 문서를 항상 꼼꼼히 확인하고 가이드에 맞춰 사용할 수 있도록 하자.)
config = { params : { q : userInput } };으로 해두면 axios를 통해 쿼리를 날릴 때 q값이 userInput으로 바뀌게 된다.
그렇게 res(API로부터 돌려받은 promise 객체)를 받고, res.data를 또 다른 함수로 넣어주는 과정을 밟았다.
4. 받은 JSON 데이터를 가지고 이미지 객체를 만들어 src를 수정해 우리가 원하는 div에 append한다.
const printImg = async (res) => {
for (data of res) {
if (data.show.image) {
const img = document.createElement("img");
img.src = data.show.image.medium;
document.querySelector("#searched").append(img);
}
}
};res를 받기 전에, postman을 이용해서 먼저 우리가 받는 JSON data의 형태를 이해하는 것이 좋다. 공식 문서에서 줬던 q=girls를 포스트멘에 돌려서 받게 되는 JSON 형태를 살펴보면, res.data.show.image에 우리가 원하는 적당한 크기의 이미지가 있음을 확인할 수 있다.(아래그림 참고) 또한 모든 결과값에 image가 있는 것이 아니므로, data.show.image가 있는 경우에만! medium 이미지를 출력할 수 있도록 한다.
5. 최종점검으로 케이팝 아이돌 BTS를 api의 q에 검색해봤다. 뭐.. 잘 돌아가는 것 같다.
