Fecthing Movies from Api

이제 fetch API를 이용해 movie data를 가져와보자.

그런데~ 니코쌤은 fetch보단 Axios를 더 좋은 방법이라고 한다.

axios는 fetch위에 작은 layer가 올라가 있는거라고 생각하면 된다.

 

간단히 짚고 넘어가면

Axios는 node.js로부터 HTTP request를 만들거나 , ES6 Promise API를 지원하는 브라우저로 부터

XMLHttpRequest를 만들기 위해 사용하는 javascript 라이브러리이다.

fetch()는 JSON데이터를 처리할 때 2단계를 거친다. 초기에 request를 보내고, 실제 data 오브젝트를 받으려면

response를 받는 측에서 .json()메소드를 사용해야 한다. 그리고 fetch()를 사용해서 response error가 발생했다면

이를 기록하는 loggin을 제대로 해야 한다.

mdn에 따르면 fetch() promise는 네트워크 오류가 발생하거나, 서버측에서 CORS가 제대로 구성되지 않았을 때

TypeError와 함께 reject된다. 일반적으로 permission문제이거나 또는 유사한 오류이다. 예를 들면

404sms network error를 구성하지 않는다.

fetch()는 DNS조회 실패같은 네트워킹 오루가 있는 상황에서만 promise를 reject시킨다. 여기서 fetch()는 response

상태 코드가 성공적인 범위에 있는지 여부만 나타낸다/ 그렇기에 번거롭게도 모든 fetch()호출에 오류처리를 하는 함수를

작성해야 한다.

 

이러한 단점을 개선한 것이 Axios라이브러리이다.

HTTP request에 대한 response를 받을때 .json()메소드를 사용할 필요가 없다.

Axios가 data object를 간단하게 반환해주기 때문이다. 그리고 HTTP request와 관련된 모든 error가 발생한경우

try catch구문에서 catch구문을 즉시 실행하기에 error발생시 매우 용이하다.

 

어찌되었든 fetch()의 개선판이 Axios인듯 하다.

 

일단 axios를 설치하자. npm i axios

 

그리고 YTS라는 곳에서 만든 API를 사용해 movie data를 가져올건데~

https://yts.mx/api#list_movies

API Documentation - YTS YIFY

광고 엄청뜬다... ㅋㅋㅋㅋ

List Movies 라는 endPoint를 들어가보자.

이걸 사용하려고 했는데.. 이사람들이 불법적인걸 하는지 API의 URL이 매번 변경된다고 한다.

다행히 니코쌤에 YTS proxy API를 만들었다고 한다. 그것으로 사용하기로 하고

 

 

이제 axios를 import해준다.

그리고 이전에 작성했던 componentDidMount 메소드에 data를 받아올 코드를 적어야 하는데~

getMoives라는 함수를 작성하고 axios.get(url) 로 데이터를 받아온다.

여기서 주의할 점은 data를 받아오는데 시간이 걸리는데  async, await을 사용해주자

전에도 포스팅했지만 자바스크립트는 우릴 기다려주지 않는다.. 그냥 다른 것을 실행해버리기에

async를 통해 비동기라는 것을 알려주고~ await으로 axios.get이 완료되면~~ 실행해~ 라고 알려준다.

그리고 componentDidMount에서 함수를 실행~! 여기까지 완료~!

 

다음 포스팅에서는 movie data를 가져와서 render function에 보여주자~