더보기 버튼을 만들어서 서버에 요청하는 방법을 실습해보자.
GET 요청 : 데이터 서버에서 가져올 때
POST 요청 : 서버로 데이터를 보낼 때
GET or POST 요청하면 브라우저가 새로고침됨
ajax 를 쓰면 새로고침 없이도 GET or POST 요청이 가능하다.
🔎 AJAX 요청하려면 ?
1. axios 라이브러리 사용
2. 기본 fetch 함수 사용
(호환성 때문에 대부분 1번 사용)
📌 axios 설치하기
1. 미리보기 띄운 것이 있다면 끄고 터미널 열기
2. npm install axios (에러나면 yarn add axios)
📌 axios 로 ajax 요청하기
실습 전 더보기 버튼을 미리 만들어두자.
더보기 버튼을 누르면
1) 서버에서 추가 게시물을 가져오고
2) 그 게시물을 <Post> 컴포넌트에 노출시킨다
// App.vue
<button @click="more">더보기</button>
클릭하면 more 이란 함수를 실행시킨다.
mothods 에 more 이란 함수를 정의하면 된다.
methods : {
more () {
// 함수 실행하는 코드
}
}
1. import axios from 'axios'
import axios from 'axios'
2. more 함수안에서 axios 를 이용하여 get 요청 하기
axios.get('url')
.then((res) => {
// 요청 성공 시 실행할 코드
})
.catch((err => {
// 요청 실패 시 실행할 코드
}))
// 더보기 버튼 클릭
more () {
axios.get('요청할 URL')
.then(function(res) {
// 요청 성공 시 실행할 코드
console.log('res > ', res)
})
}
GET 요청으로 가져온 데이터는 res 안에 담겨있다. 궁금하면 콘솔 로그를 찍어보자.
⚡ then 안의 function 은 화살표 함수를 이용하는 것이 좋다. (그래야 this 활용할 수 있음 / 일반 함수는 this 를 재정의)
3. get 요청하여 받은 data 를 <Post> 컴포넌트에 뿌리기
vue 는 데이터가 변하면 자동으로 재렌더링해주기 때문에 get 요청하여 새로 받은 데이터를 기존 데이터에 추가해주기만 하면 된다.
<script>
import Container from "@/components/Container.vue";
import data from "@/assets/data"
import axios from 'axios'
export default {
name: 'App',
data () {
return {
data
}
},
components: {
Container
},
methods : {
// 더보기 버튼 클릭
more () {
axios.get('요청 url')
.then((res) => {
this.data.push(res.data);
})
.catch(() => {
// 요청 실패 시 실행할 코드
console.log('요청에 실패하였습니다.')
})
}
}
}
</script>
axios post 요청은
axios.post('url', '보낼데이터').then((res)=>{}).catch((err)=>{})
catch 는 요청에 실패할 때 실행되는 코드이다.
'Vue3 > 코딩애플 part3' 카테고리의 다른 글
[Vue/코딩애플/part3] 6. vuex 설치 (0) | 2024.08.05 |
---|---|
[Vue/코딩애플/part3] 5. 멀리 있는 컴포넌트간 데이터 전송 시키기(mitt) (0) | 2024.08.05 |
[Vue/코딩애플/part3] 4. props 대신 slot (0) | 2024.08.05 |
[Vue/코딩애플/part3] 3. tab 만들기 / URL.createObjectURL() (0) | 2024.08.02 |
[Vue/코딩애플/part3] 1. 인스타그램 프로젝트 생성 & 레이아웃 만들기 / style 속성 데이터 바인딩 (0) | 2024.08.02 |