[Vue.js] API로 서버에 요청 보내고 이미지 응답 받기

---

Vue와 axios를 활용하여 API 서버로 요청을 보내 응답 받은 이미지를 화면에 표시하는 앱을 완성해보자 !

---

과정

1️⃣ Vue와axios를 사용하기 위해 공식문서에서 CDN과 라이브러리를 설치한다.

Vue 공식문서 바로가기

axios github 링크 (둘 중 아무거나 가져와도 상관없습니다)

 

2️⃣ HTML 기본 구조를 잡는다.

API로 받은 이미지를 넣을 img 태그와 버튼을 누르면 이미지가 랜덤으로 바뀔 수 있도록 버튼 태그를 만들어줬습니다.

Vue 인스턴스와 연결시킬 예정이므로 잊지말고 id를 할당해줍시다 !

 

3️⃣ Vue 인스턴스를 만든다.

( 저는 고양이 사진으로 구성하고자 고양이 이미지를 제공하는 API를 사용했습니다 ~)

const app = new Vue({
  el: '#app',
  data: {
    catImgUrl: '',
  },
  methods: {
    getCat: function() {
      const API_URL = 'https://api.thecatapi.com/v1/images/search'
      axios.get(API_URL)  // axios-> promise 반환
      .then((response) => {  //promise 성공시
        const imgUrl = response.data[0].url
        this.catImgUrl = imgUrl
      })
    },
  },
})

 

4️⃣ img 태그에 Vue인스턴스 데이터를 바인딩 시키고, 버튼이 눌렸을 때 함수가 실행될 수 있도록 이벤트 핸들링을 해준다.

  <div id="app">
    <h1>Cat API</h1>
    <img :src="catImgUrl" alt="" style="height: 300px;">
    <button @click="getCat">Get Cat</button>
  </div>

 

 

완성 !

Get Cat 버튼을 클릭하면 axios를 통해 API로 요청을 보내고 응답 받은 데이터를 img 요소의 리소스로 할당한다.