1. axios 설치
npm i axios --save
2. views 폴더 NewsView.vue파일에 axios 등록 및 API 사용
[api 구현하고자 하는 components 파일에 axios 등록하면 됨]
<template>
<div>
<div v-for="user in users" :key="user">{{ user.title }}</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data(){
return {
users: []
}
},
created(){
axios.get('https://api.hnpwa.com/v0/news/1.json')
.then(response => this.users = response.data)
.catch(error => console.log(error))
},
/*
위 화살표 함수와 동일한 코드 ▼
axios.get('https://api.hnpwa.com/v0/news/1.json')
.then(function(response){
this.users = response.data
})
.catch(function(error){
console.log(error)
});
*/
}
</script>
But,
component마다 api를 호출해서 쓰는게 아닌 일괄적으로 api 폴더를 만들어서 관리!
src에다가 api 폴더 만들고 실습하는건 커밍순 ,,
'SPA > Vue' 카테고리의 다른 글
axios를 이용한 api호출 vuex로 모듈화 하기 (예시O) (0) | 2021.05.11 |
---|---|
axios의 api 함수 구조화 방법 [예시O] (0) | 2021.05.11 |
vuejs 라우터 설치 및 구현 (0) | 2021.05.10 |
Vue CLI 2.x / CLI 3.x 비교 (0) | 2021.05.10 |
vue.js todolist 만들기 [Helper함수 사용] --4 (0) | 2021.05.10 |