Vue - ajax로 서버에서 데이터 가져오기

서버에 데이터 요청하는 방식

• GET : 서버에서 데이터를 가져올' 때 사용
• POST : 서버로 데이터를 '보낼' 때 사용

GET 또는 POST 요청하면 브라우저가 새로고침 되는데, ajax를 쓰면 새로고침 없이도 GET, POST 요청이 가능하다.

ajax 요청하려면 axios 또는 fetch함수를 사용해야하는데 호환성 문제 때문에 axios를 더 많이 사용한다.

 

axios 설치하기

• 설치 전에 미리보기 하던 터미널 종료 후 새 터미널 오픈

npm install axios
또는
yarn add axios

 

axios로 ajax 요청하기 - GET방식

<script>
import axios from 'axios'

export default {
	methods: {
    	함수() {
        	axios.get("url").then((result) => {
                    요청 성공시 실행할 코드
                });
        },
    },
}

</script>

<script>
import axios from 'axios'

export default {
	methods: {
    	함수() {
        	axios.post("url", {name : 'kim'})
            .then()
            .catch((error) => { 
            	실패 시 실행 
            });
        },
    },
}

</script>