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')
- 특정 데이터나 값을 삭제할 때 요청하는 메서드.
Author And Source
이 문제에 관하여(Restful API + Axios 비동기통신으로 api 데이터 이용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@park0eun/Axios-비동기통신으로-api-데이터-이용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)