Axios로 데이터 가져오기를 공부하면서 배운 것

20625 단어 beginnerstutorialwebdevjavascript
여러분, 안녕하세요!

돌아와서 이제 한 가지 더 배웠습니다. 요청하는 방법을 배웠습니다. 나는 내가 어떻게 그 일을 했는지, 그리고 그것을 하기 위해 어떤 개념을 배웠는지 보여주기 위해 여기에 있습니다.



TV API | TVmaze 사용

웹 API



인터페이스는 엔드포인트를 통해 데이터를 소비하는 HTTP 기반입니다.



HTTP 기반은 또한 HTTP 동사를 통해 이러한 끝점과 통신할 수 있음을 의미합니다. 이것은 우리가 보낼 수 있는 다양한 유형의 요청(get, post, delete.. )을 의미합니다.
  • GET: 정보를 가져오거나 검색합니다
    • .
  • POST: 데이터베이스에 저장할 데이터를 보냅니다.
  • 삭제: API를 통해 항목 삭제

    • 다른 사람들이 있습니다.

    약속



    비동기 작업의 성공 또는 실패를 나타내는 개체입니다. 배울 수 있어서 좋았습니다. 프라미스를 사용하면 콜백 지옥을 피할 수 있기 때문입니다.

    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 엔드포인트가 쿼리와 함께 작동합니다.
  • API: https://api.tvmaze.com
  • URL:/search/shows?q=:query
  • 예: https://api.tvmaze.com/search/shows?q=girls

    • 템플릿 리터럴(백틱)을 사용하여 사용자의 각 입력을 캡처하고 쿼리에서 직접 수정할 수 있습니다.

    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에서 웹 개발 학습 여정을 공유하고 있습니다.

    다음에 만나요!
    Como configurar seu NGINX e PHP7 para subir uma aplicacao feita em laravel
    미디어 쿼리 CSS, 반응형 디자인 및 CSS 그리드 미디어 쿼리

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage