[Vue.js][Ch4][영화검색 사이트] Search - 버튼

OMDb API

구글에 omdb api 검색 > https://www.omdbapi.com/ 이동 > Usage 요청주소 확인

http://www.omdbapi.com/?apikey=[yourkey]&

 HTTP 요청할 수 있게 패키지 설치

npm i axios

영화 검색을 실행하는 버튼 추가

<button 
  class="btn btn-primary" 
  @click="apply">
  Apply
</button>

• 버튼 선택하면 Apply 메서드 실행

영화 검색 데이터를 받아오는 메서드 작성

methods: {
    async apply() {   // 비동기 영화 검색 메소드
      const OMDB_API_KEY = '7035c60c';
      // https로 요청
      // await : 처리된 결과가 나올때까지 기다리기 위해 사용
      const res = await axios.get(`https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${this.title}&type=${this.type}&y=${this.year}&page=1`);   // 보간법 사용
      console.log(res);
    }
}

출력