1. axios(액시오스)?
axios는 뷰에서 권고하는 Promise 기반의 HTTP 통신 라이브러리이다.
2. axios 설치
3. 사용방법
promise 기반인 만큼 비동기 통신 방식이고 .then과 .catch를 사용한다.
통신이 정삭적으로 이루어졌을 때 .then으로 callback을 받아 처리하고 .catch를 통해 오류처리를 한다.
1
2
3
4
5
6
7
8
9
| axios.get('/api/data/sample')
.then(res => {
console.log(`satus code: ${res.status}`);
console.log(`headers: ${res.headers}`);
console.log(`data: ${res.data}`);
})
.catch(err => {
consonle.log(`error : ${error}`);
})
|
4. 요청 메서드
4.1 axios get
서버에서 데이터를 가져올 때 사용하는 메서드이다. 두번째 인자인 conifg 객체로 요청 값(hedaer, timeout, params)을 넘길 수 있다.
1
2
3
4
5
6
7
| axios.get('/api/data/sample', {
params: {title : '타이틀'},
headers: {header : '헤더'},
timeout : 30000
}).then(res => {
console.log(res.data);
});
|
4.2 axios post
서버에 데이터를 새로 생성할 때 사용하는 메서드이다. 두 번째 파라미터 data에 생성할 데이터를 넘긴다.
1
2
3
4
| axios.post('/api/data', {title: '타이틀'})
.then(res => {
console.log(res.data);
})
|
4.3 axiso put
특정 데이터를 수정할 때 요청하는 메서드이다. 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용하고 post는 여러 번 호출할 경우 새로운 데이터가 지속적으로 추가되는 반면, put은 한 번 요청을 하거나 여러 번 지속적으로 요청해도 결과가 동일하다는 차이점이 있다.
1
| axios.put('api/data', { name: 'moya' })
|
4.4 axios delete
특정 데이터나 값을 삭제할 때 요청하는 메서드이다.
1
2
3
4
| axios.delet('/api/data')
.then(res => {
console.log(res.data)
})
|
5. axios Config 옵션
| 옵션 |
설명 |
| method |
요청할 때 사용하는 메서드로 기본타입은 get이다. |
| url |
요청에 사용할 서버의 URL |
| baseURL |
인스턴스의 기본 URL 값을 설정하는 속성, 인스턴스 별로 baseURL뒤에 별도 URL을 추가해서 사용 |
| headers |
헤더의 수정이 필요할 때 사용하는 옵션 |
| timeout |
요청을 보내고 응답을 받기까지의 시간을 설정하는 옵션, 초과시 에러발생 |
| params |
요청에 붙일 파라미터, 통신에 필요한 데이터를 의미한다. |
| responseType |
서버로부터 어떤 데이터 형식으로 응답을 받을지 지정하는 옵션 |
