Vue.js - fetch API

1. fetch API

Vue.js 에서 AJAX 역할을 하는 Fetch API를 제공.

2. 데이터 가져오기

fetch API는 웹 브라우저에서 데이터를 가져오는 목적으로 사용되며, Vue 인스턴스의 methods에 데이터를 가져오는 코드를 작성한다.

methods: {
    getPosts: function() {
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(data => this.posts = data)
    }
  }

3. 응용

fetchWeather: function (e) {
   if (e.key == "Enter") {
     let fetchUrl = `${this.url_base}weather?q=${this.query}&lang=kr&units=metric&lang=ko&APPID=${this.api_key}`;
        fetch(fetchUrl)
          .then((res) => {
            console.log(res);
            return res.json();
          })
          .then((results) => {
            return this.setResult(results);
          });
      }
    },
      
setResult(results) {
  this.weather = results;
 },

<div class="display-6 mb-2 font-weight-bold" style="color: #1c2331"> {{ Math.round(weather.main.temp) }}℃</div>

현재 원하는 지역의 날씨를 알려줄 수 있는 openweathermap API를 호출하였다.
동적 쿼리가 필요한 경우 data 객체에 미리 정의한후 ${this.data} 와 같이 생성하였고 데이터바인딩 역시 쉽게 성공했다.