[vue] axios를 이용한 api 호출

<template>
  <div>
    <div v-for="(user, i) in users" :key="i">
      {{ user.title }}
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'NewsView',
  data(){
    return {
      users : []
    }
  },
  created() {
    var vm = this;
    axios.get('https://api.hnpwa.com/v0/news/1.json')
        .then(function (response) {
          console.log(response);
          vm.users = response.data;
        })
        .catch()
  }
}
</script>

<style></style>

📍 여기서 created()에서 vm을 생성한 이유는!!

var vm = this를 생성하지 않고 바로 this.users로 바로 data에 접근하면 현재 콜백이 현재의 뷰 컴포넌트를 바라보지 않기 때문에 오류가 난다. 이를 방지하기 위해 this를 객체로 지정해 var vm = this;로 생성을 해줘야 한다.
이후 vm.users 를 통해 데이터를 넘기면 제대로 넘어와 지는 것을 확인할 수 있다.

.then을 통해 로딩이 완료되면 데이터를 넘겨주기 때문에 성공적으로 데이터가 넘어오면 response.data가 vm.users로 넘어가서, 이를 해당 컴포넌트에서 사용할 수 있다.

---

위 구문에서 콜백함수를 이용해서 더 간단하게 함수를 구현할 수 있다.

created(){
    fetchJobsList()
        .then(response=>this.jobs = response.data)
        .catch(error=>console.log(error))
  }

1. axios 요청 보내기

📍 HTTP GET 요청
axios.get('url 주소').then().catch();
📍 HTTP POST 요청
axios.post('url 주소').then().catch();

위에서는 created() 로 했지만, 스크립트에 method : 를 적어서 사용하기도한다.

2. data로 users의 array를 return받는다.

data(){
    return {
      users : []
    }
  }

3. 템플릿에서 {{ user }} 를 통해서 배열의 길이만큼 v-for을 통해 내용을 뿌린다.

<div v-for="(user, i) in users" :key="i">
      {{ user.title }}
    </div>

---

그러나 위의 방식으로 컴포넌트마다 axios를 부르고 api를 작성하는건 좋은 방법이 아니기에, src 폴더 내에 api폴더 생성 후 api호출을 모아놓은 index.js 파일을 만들어두는 것이 좋다.

import axios from "axios";

// 1. HTTP Request & Response 와 관련된 기본 설정

const config = {
    baseUrl : 'https://api.hnpwa.com/v0/'
}

// 2. API 함수들을 정리

function fetchNewList() {
    axios.get(`${config.baseUrl}news/1.json`);
    // return  axios.get(config.baseurl + 'news/1.json')과도 동일함
}

export {
    fetchNewList
}

1. HTTP Request & Response 와 관련된 기본 설정

• baseurl은 Api url에서 공통되는 주소까지를 작성한다.
  
  v0까지는 모두 주소가 동일하니 저 부분까지를 baseURL 에 작성한다.

2. API 함수들을 정리

function fetchNewList() {
    axios.get(`${config.baseUrl}news/1.json`);
    // return  axios.get(config.baseurl + 'news/1.json')과도 동일함
}

api 함수들을 한 곳에 모아 정리한다. return 부분에서 ${config.baseUrl}news/1.json 의 형태로 주로 작성한다.
baseUrl을 적고, 뒤에 남은 api주소를 적는 것이다.

3. export !!

4. 컴포넌트에서 해당 함수 import 후