Restful API + Axios 비동기통신으로 api 데이터 이용하기

* 기본적으로 axios가 설치되어있어야 합니다.

---

👉 데이터 불러오기

 ...
 	<div>
    	   <button v-on:click="fetchData">데이터 불러오기</button>
    	</div>
 ...
 
	<script>
    	    import axios from "axios";
            ---
            export default (){
                data(){}
                method(){
                    fetchData(){
                    	axios.get('사용 할 api의 주소')
                        // ex) axios.get(`${API}/items`, { params })
                        // = get으로 받은 items의 api를 params 인자로 담는다. 
                        .then((result) => {
                        // 위 api에서 가져온 데이터를 result로 아래에 담는다.
                        // 비동기 처리하기 위함
                        	getItemList.value = result.data as itemType[];
                            	// getItemList의 value로 result로 받은 data를 담는다 (그 뒤는 ts) 
                         .catch(){}
                                
                        }
                    }
                }
            }
    	   
   	</script>

---

👉 Restful api 메서드 종류

1. get

axios.get(url[,config])
ex) axios.get('user/1')

• 서버에서 데이터를 가져올 때 사용하는 메서드.
• 두 번째 파라미터 config 객체에는 헤더(header), 응답 초과시간 (timeout), 인자 값(params) 등의 요청 값을 같이 넘길 수 있다.

---

2. post

axios.post(url[,data[,config]])
ex) axios.post('/user', { name : '자두' })

• 서버에 데이터를 새로 만들어 등록할 때 사용하는 메서드.
• 두 번째 파라미터 data에 생성할 데이터를 넘긴다.

---

3. put

axios.put(url[,data[,config]])
ex) axios.put('/user/2', { name : '호두' })

• 특정 데이터를 수정하거나 새로운 리소스를 생성할 때 요청하는 메서드.
• post는 여러번 호출할 경우 새로운 데이터가 지속적으로 추가되지만, put은 한 번 요청하거나 여러번 지속적으로 요청해도 결과값이 동일하다.
• 위의 예시처럼 put을 여러번 등록해도 2번 유저의 이름은 호두로 동일하게 수정된다.

---

4. delete

axios.delete(url[,config])
ex) axios.delete('/user/2')

• 특정 데이터나 값을 삭제할 때 요청하는 메서드.

---

참고1 👈 click
참고2 👈 click