[VanillaJS] API 통신

Chanho Kim·2021년 8월 31일

[vanillajs] 영화 앱

목록 보기

3/4

1. Fetch API를 활용한 비동기 통신

1-1. Fetch API란?

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. Fetch에는 일반적인 오브젝트로로 Request 와 Response (en-US)가 포함되어 있습니다. fetch()는 Promise객체를 반환합니다.

이와 같은 Fetch API를 이용해서 비동기 통신을 만들어 봅니다.

1-2. Fetch API사용법

Fetch API는 두개의 매개변수를 받습니다. 첫번째는 URL로 필수값이고, 두번째는 Option입니다.

// 예시 코드
const fetchData = async () => {
  try {
    const url = "http://loacalhost:3000";
    const option = {
      method: "get",
      headers: {
        "Content-Type": "application/json",
      },
    };
    const response = await fetch(url, option);
    return response;
  } catch (e) {
    throw e;
  }
};

2. 구현

2-1. 기본 구조

저번 프로젝트에 이어 api폴더를 만들어 줍니다.

├── index.html
└── src
    ├── App.js
    ├── main.js
    ├── api			//추가
    │   └── movieApi.js 	//추가
    └── components
        └── Hello.js

2-2. 영화 api

nomadcoders강의를 듣다보면 yts의 영화 api를 활용하는 강의가 있습니다. 이 api를 활용해 이번 Vanillajs SPA프로젝트를 만들어 보겠습니다.

yts 영화 api
https://yts.mx/api

2-3. fetch module

비동기로 동작하는 fetch module을 만들어 줍니다. url을 매개변수로 받아 fetch api로 비동기 통신을 합니다.
try catch를 사용해서 비동기 처리에 대한 예외처리를 해줍니다. 또한 fetch의 결과값인 response의 ok값을 확인해 통신의 결과에 대한 예외처리도 해줍니다.

api/movieApi.js

const request = async (url) => {
  try {
    const response = await fetch(url);
    if (response.ok) {
      const data = await response.json();
      return data;
    } else {
      const errorData = await response.json();
      throw errorData;
    }
  } catch (e) {
    throw {
      message: e.message,
      status: e.status,
    };
  }
};

2-4 api module

fetch module을 사용해 비동기 통신을 합니다.
위에서 만든 fetch module request를 활용합니다. url로는 yts api를 사용하고, document에 있는 limit값을 사용해 적정량의 response를 받습니다. 이때 request에서 error를 throw해줬을 경우의 예외처리를 해줍니다. isError라는 값을 부여해서 추후에 에러 관련 랜더링을 할 수 있도록 만들어줬습니다.
api/movieApi.js

...
const api = {
  getMovies: async () => {
    try {
      const movies = await request(
        "https://yts.mx/api/v2/list_movies.json?limit=15"
      );
      return {
        isError: false,
        data: movies?.data?.movies,
      };
    } catch (e) {
      return {
        isError: true,
        data: e,
      };
    }
  },
};

export { api };

2-5. app.js

app.js에서 만들어둔 api module을 활용해 비동기 통신을 하는 함수를 Hello component로 넘겨줍니다.
api module에서 만들어둔 response의 isError값에 따라 예외처리를 해줍니다.
또한 추후 Hello component에 작성해줄 setData함수를 가져와서 data를 update해줍니다.

import Hello from "./components/ScrollView.js";
import { api } from "./api/movieApi.js";

export default class App {
  constructor($target) {
    const hello = new Hello({
      $target,
      fetchData: async () => {
        const response = await api.getMovies();
        if (!response.isError) {
          hello.setData([...hello.data, ...response.data]);
        } else {
          //에러처리하기
        }
      },
    });
  }
}

2-6. Hello.js

Hello component에서는 fetchData를 받아와 constructor에서 호출해줍니다.
또한 data setter함수를 만들어 줍니다. 이때 render함수를 한번 호출해줘서 data update시 화면이 최신 상태로 유지되게 합니다.
업데이트 된 data의 title을 반복문을 통해 rendering해봅니다.

export default class Hello {
  constructor({ $target, fetchData }) {
    this.section = document.createElement("section");
    this.section.classList.add("container");
    this.data = [];
    $target.appendChild(this.section);
    fetchData();
  }

  setData(data) {
    this.data = data;
    this.render();
  }

  render() {
    this.section.innerHTML = "";
    this.data.forEach((val, idx) => {
      const block = document.createElement("div");

      const title = document.createElement("h1");
      title.innerText = val.title;
      block.appendChild(title);
      this.section.appendChild(block);
    });
  }
}