React

api 파트 2

정중식 2019. 11. 11. 23:10
  • Append To Response: video[예고편]나 image[포스터] 같은 것들을 append(덧붙이기) 할때 사용
  1.  the movie database API 에 접속하면 시뮬레이션을 해볼수있다.
  2. 사진의 빨간동그라미 부분에 vidoes를 입력하면
  3. json오브젝트 맨 하단에 videos라는 객체가 추가됨

 

  • app.js
import axios from "axios";

const api = axios.create({
  baseURL: "https://api.themoviedb.org/3/",
  params: {
    api_key: "d72dd1ba6c0d1b77338e9259724d1db9",
    language: "en-US"
  }
});

export const moviesApi = {
  nowPlaying: () => api.get("movie/now_playing"),
  upcoming: () => api.get("movie/upcoming"),
  popular: () => api.get("movie/popular"),
  movieDetail: id =>
    api.get(`movie/${id}`, {
      params: {
        append_to_response: "videos"
      }
    }),
  search: term =>
    api.get("search/movie", {
      params: {
        query: encodeURIComponent(term) // encodeURIComponent()은 괄호안의 값을 인코딩해준다.
        // encodeURIComponent() 사용 않하면, url에 스페이스값을 넣어줄경우 %로 표시되어 오류가남
      }
    })
};

export const tvApi = {
  topRated: () => api.get("tv/top_rated"),
  popular: () => api.get("tv/popular"),
  airingToday: () => api.get("tv/airing_today"),
  showDetail: id =>
    api.get(`tv/${id}`, {
      params: {
        append_to_response: "videos"
      }
    }),
  search: term =>
    api.get("search/tv", {
      params: {
        query: encodeURIComponent(term) // encodeURIComponent()은 괄호안의 값을 인코딩해준다.
        // encodeURIComponent() 사용 않하면, url에 스페이스값을 넣어줄경우 %로 표시되어 오류가남
      }
    })
};
  • 라우터,파라미터들을 개별적으로 설정하는 방식. (! api 전체를 위한 것은 아님)