[Vue/코딩애플/part3] 2. 서버에 ajax 요청하기

더보기 버튼을 만들어서 서버에 요청하는 방법을 실습해보자.

 

GET 요청 : 데이터 서버에서 가져올 때

POST 요청 : 서버로 데이터를 보낼 때

 

GET or POST 요청하면 브라우저가 새로고침됨

ajax 를 쓰면 새로고침 없이도 GET or POST 요청이 가능하다.

 

🔎 AJAX 요청하려면 ?

1. axios 라이브러리 사용

2. 기본 fetch 함수 사용

(호환성 때문에 대부분 1번 사용)

 

📌 axios 설치하기

1. 미리보기 띄운 것이 있다면 끄고 터미널 열기

2. npm install axios (에러나면 yarn add axios)

 

package.json 에서 설치 확인

 

📌 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 는 요청에 실패할 때 실행되는 코드이다.