유블로그

[Vuejs] HTTP 통신 : axios 본문

Vuejs

[Vuejs] HTTP 통신 : axios

yujeong kang 2020. 11. 23. 02:48

- axios

  • promise 기반의 http 통신 라이브러리!

 * Promise

서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 라이브러리.

데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타나는 로직을 실행해야할 때 주로 Promise를 활용한다.

 

API 유형 처리 결과
axios.get('URL 주소').then().catch() 해당 URL 주소에 대해 HTTP GET 요청을 보냄. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 실행, 오류 발생하면 catch() 실행.
axios.post('URL 주소').then().catch() 해당 URL 주소에 대해 HTTP POST 요청을 보냄. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 실행, 오류 발생하면 catch() 실행.
axios({옵션 속성}) HTTP 요청에 대한 자세한 속성들을 직접 정의. URL, HTTP 요청방식, 보내는 데이터 유형 등등!

 

axios({
	method: 'post',
    url: '/user',
    data: {
    	name: '홍길동',
        userid: 'hong',
    }
});
axios({
	method: 'get',
    url: '/user/id',
    responseType: 'json'
})
.then(function (response) {
	// logic
});

 

'Vuejs' 카테고리의 다른 글

[Vuejs] SFC(Single File Component)  (0) 2020.11.23
[Vuejs] vue-router  (0) 2020.11.23
[Vuejs] Component & Event  (0) 2020.11.23
[Vuejs] Vue Instance 속성  (0) 2020.11.23
[Vuejs] template(템플릿)  (0) 2020.11.23