Axios 라이브러리

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.

쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 사용.

자바스크립트 내장 라이브러리인 fetch API보다 좀 더 개발자 친화적인 서드파티 라이브러리.

실무에서 fetch보다 Axios 많이 사용.

 

Axios 사용 방법

npm install axios --save

axios.get(API 주소), axios.post(API 주소)

 

Axios 인스턴스화 하기

다양한 API를 요청하다보면 API key값이 겹치는 부분이 발생한다. 그럴때 중복된 부분을 계속 입력하지 않도록 인스턴스화를 한다.

get movie by latest
https://api.themoviedb.org/3/movie/latest?api_key=<<api key>>&language=en-US

get movie detail
ttps://api.themoviedb.org/3/movie/{movie_id}?api_key<<api_key>>&language=en-US

get movie reviews
https://api.themoviedb.org/3/movie/{movie_id}/reviews?api_key<<api_key>>&language=en-US&page=1

get trending
https://api.themoviedb.org/3/movie/latest?api_key<<api_key>>&language=en-US&page=1

~/3 까지 주소가 중복되어 있다.

 

Axios 인스턴스 만드는 순서

인스턴스 생성할 api 폴더 생성 및 각 파일에 API를 위한 설정

axios.js 파일 설정 내용

- baseURL에 중복되는 부분까지의 api사이트 주소 입력

- params에 api_key와 language 입력

 

이렇게 하면 중복되는 많은 부분을 해결 할 수 있다.

 

request.js 파일 설정 내용

fetch로 받아올 정보들을 request.js에 입력

 

 

참고

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9