Axios로 데이터 가져오기를 공부하면서 배운 것
20625 단어 tutorialbeginnersjavascriptwebdev
돌아와서 이제 한 가지 더 배웠습니다. 요청하는 방법을 배웠습니다. 나는 내가 어떻게 그 일을 했는지, 그리고 그것을 하기 위해 어떤 개념을 배웠는지 보여주기 위해 여기에 있습니다.
TV API | TVmaze 사용
웹 API
인터페이스는 엔드포인트를 통해 데이터를 소비하는 HTTP 기반입니다.
HTTP 기반은 또한 HTTP 동사를 통해 이러한 끝점과 통신할 수 있음을 의미합니다. 이것은 우리가 보낼 수 있는 다양한 유형의 요청(get, post, delete.. )을 의미합니다.
다른 사람들이 있습니다.
약속
비동기 작업의 성공 또는 실패를 나타내는 개체입니다. 배울 수 있어서 좋았습니다. 프라미스를 사용하면 콜백 지옥을 피할 수 있기 때문입니다.
Promise는 세 가지 상태를 가질 수 있습니다.
Promise의 좋은 점은 콜백(then 및 catch)을 호출하기 위해 개체에 연결할 수 있는 이 두 가지 중요한 메서드입니다.
가져오기 API
Fetch는 기능을 사용하여 요청할 수 있으며 약속을 지원합니다. Promise를 지원하기 때문에 이전에 언급한 강력한 방법을 사용할 수 있습니다.
악시오스
이것은 HTTP 요청을 만들기 위한 훌륭한 라이브러리입니다. fetch(url)를 호출하는 대신
axios.get(url)를 호출합니다.그리고 왜 귀찮게?
Axios를 사용하면 데이터를 구문 분석할 필요가 없습니다.
비동기
여기서 깊이 들어가지는 않겠지만 비동기 함수는 항상 약속을 반환하기 때문에 흥미롭습니다. async/await를 사용하면 약속이 이행될 때까지 기다리므로 성공하면 다음 명령을 실행합니다.
시작하자!
Axios의 문서(https://axios-http.com/docs/intro)에서 CDN을 얻을 수 있으므로 설치할 필요가 없습니다.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
A. HTML 본문 만들기
<body>
<h1>TV Search</h1>
<form id="form">
<input id="userInput" name="userInput" type="text">
<button id="submit">Submit</button>
</form>
<div class="shows"></div>
<script src="main.js"></script>
</body>
B. 내 CSS에만 필요합니다.
.shows {
display: flex;
flex-wrap: wrap;
}
div {
margin: 10px;
}
C. 제출 버튼과의 모든 상호 작용에 대한 addEventListener 생성.
const form = document.querySelector('#form');
const showsContainer = document.querySelector('.shows');
form.addEventListener('click', (e) => {
e.preventDefault();
console.log('btn pressed');
});
여기에서는 제출(요청)할 때마다 페이지가 다시 로드되지 않는 것을 방지합니다.
이 addEventListener 내에서 WEB API에 내가 찾고 있는 이름의 TV 쇼를 가져오도록 요청하고 싶습니다.
TVMaze( https://www.tvmaze.com/api )의 설명서를 보면 Show Search 엔드포인트가 쿼리와 함께 작동합니다.
템플릿 리터럴(백틱)을 사용하여 사용자의 각 입력을 캡처하고 쿼리에서 직접 수정할 수 있습니다.
const form = document.querySelector('#form');
const showsContainer = document.querySelector('.shows');
form.addEventListener('click', async (e) => {
e.preventDefault();
const userInput = document.querySelector('#userInput').value;
const URL = `https://api.tvmaze.com/search/shows?q=${userInput}`;
//make the request
const res = await axios.get(URL);
console.log(res.data);
});
D. DOM 조작
DOM 조작에 대해 이전에 연구한 모든 것을 사용하여 이 데이터를 사용하여 찾은 각 쇼에 대한 이미지와 제목을 생성할 수 있습니다.
const form = document.querySelector('#form');
const showsContainer = document.querySelector('.shows');
form.addEventListener('click', async (e) => {
e.preventDefault();
const userInput = document.querySelector('#userInput').value;
const URL = `https://api.tvmaze.com/search/shows?q=${userInput}`;
//make the request
const res = await axios.get(URL);
console.log(res.data);
const img = document.createElement('img');
const title = document.createElement('h1');
img.src = res.data[0].show.image.medium;
title.textContent = res.data[0].show.name;
document.body.append(title);
document.body.append(img);
});
데이터 배열의 첫 번째 쇼를 위해 h1과 이미지를 생성합니다.
E. 첫 번째 쇼뿐만 아니라 더 많은 쇼를 평가하기 위해 새로운 기능을 만듭니다.
E.1 여기에서 페이지에 표시할 최대 5개의 쇼를 제한하고 싶습니다.
const limitShows = (data) => {
let numberOfShows = [];
if (data.length >= 5) {
for (let i = 0; i < 5; i++) {
numberOfShows.push(data[i]);
}
} else {
for (let show of data) {
numberOfShows.push(show);
}
}
return numberOfShows;
};
E.2 여기에서는 이전 배열에 수집된 각 쇼의 제목과 이미지를 인쇄하는 또 다른 기능을 만들 것입니다.
const publishShows = (shows) => {
shows.forEach((show) => {
const img = document.createElement('img');
const title = document.createElement('h1');
const div = document.createElement('div');
img.src = show.show.image.medium;
title.textContent = show.show.name;
div.appendChild(title);
div.appendChild(img);
showsContainer.appendChild(div);
});
};
F. 내 addEventListener 정리 및 함수 호출
form.addEventListener('click', async (e) => {
e.preventDefault();
const userInput = document.querySelector('#userInput').value;
const URL = `https://api.tvmaze.com/search/shows?q=${userInput}`;
//make the request
const res = await axios.get(URL);
const shows = limitShows(res.data);
publishShows(shows);
});
끝났어?
예, 아니오!
여기에는 개선의 여지가 많습니다.
알려진 문제:
여기에는 이 프로젝트를 작동시키는 방법을 배운 많은 새로운 개념이 있습니다. 살펴보고 싶다면 여기 repo이 있습니다.
Twitter에서 웹 개발 학습 여정을 공유하고 있습니다.
다음에 만나요!
Reference
이 문제에 관하여(Axios로 데이터 가져오기를 공부하면서 배운 것), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mpfdev/what-i-learned-while-studying-data-fetching-with-axios-k6g텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
