[개인프로젝트] 2. Axios 인스턴스 생성 및 요청 보내기

Axios : 브라우저, node.js를 위한 Promise API를 활용한 HTTP 비동기 통신 라이브러리
쉽게, BE-FE 간 통신을 위한 라이브러리 이다.

fetch의 단점은 응답 데이터를 json으로 변경한 뒤 작업을 해야한다. axios는 응답 데이터를 바로 json으로 받아오기 때문에 편리함을 제공한다.

Axios 사용 방법

• axios 모듈 설치 npm install axios --save
• 사용예시 : axios.get("thhps://api.themoviedb.org/3/trending/all/week")

Axios 인스턴스화 하기

1. 인스턴스화 하는 이유는?

• 중복된 부분을 계속 입력하지 않아도 되기 때문이다.
• 중복 예시
  Get Movie By Latest : https://api.themoviedb.org/3/movie/latest?api_key=<<api_key>>&language=en-US
  Get Movie Detaill : https://api.themoviedb.org/3/movie/{movie_id}?api_key=<<api_key>>&language=en-US

  중복 url : https://api.themoviedb.org/3/
  해당 중복 url을 "baseURL"로 따로 관리하는 것이 좋다.

2. Axios 인스턴스 만드는 순서

1. 인스턴스 생성할 폴더 파일 생성하기
   
2. 예시 : https://api.themoviedb.org/3/movie/latest?api_key=<<api_key>>&language=en-US

• axios.js

import axios from "axios"

const instance = axios.create({
	baseURL: "https://api.themoviedb.org/3/", // 중복 URL
  	params: {
    	api_key: "a38fa376de46b95eb6b7c9e______",
      	language: "ko-KR"
    }
})

export default instance;

• requests.js
  : baseURL 를 제외한 각각의 요청 url path 를 인스턴스 생성
  https://developers.themoviedb.org/3/getting-started/introduction 를 참조하여 필요한 path를 인스턴스로 관리하면 된다.

const requests = {
  fetchNowPlaying: "movie/now_playing",
  fetchTrending: "trending/all/week",
  fetchTopRated: "movie/top_rated",
  fetchActionMovies: "discover/movie?with_genres=28",
  fetchComedyMovies: "discover/movie?with_genres=35",
  fetchHorrorMovies: "discover/movie?with_genres=27",
  fetchRomanceMovies: "discover/movie?with_genres=10749",
  fetchDocumentaries: "discover/movie?with_genres=99",
};

export default requests;