Axios는 Promise 기반의 자바스크립트 비동기 처리 방식을 사용하는 HTTP 통신 라이브러리이다.
Vue에서 Axios를 이용해서 데이터를 전송하는 사용자 form을 만들어 실습한 내용을 정리해보았다.
전체코드
<template>
<div>
<form v-on:submit.prevent="submitForm">
<div>
<label for="username">id:</label>
<input id="username" type="text" v-model="username">
</div>
<div>
<label for="password">pw:</label>
<input id="password" type="password" v-model="password">
</div>
<button type="submit">login</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data: function(){
return {
username: '',
password: '',
}
},
methods: {
submitForm: function() {
console.log(this.username, this.password);
var url = 'https://jsonplaceholder.typicode.com/users';
var data = {
username: this.username,
password: this.password
}
axios.post(url, data)
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
}
}
}
</script>
<style>
</style>해당 코드를 실행하면
이런 사용자 입력 form이 뜬다
password와 username은 아직 값이 들어있지 않은 상태에서
id와 password를 입력하고 login 버튼을 클릭하면
post에 성공해 console.log가 작동한걸 볼 수 있다.
network탭에 들어가면
Headers와 Response에서 받아온 값을 볼 수 있다.
https://jsonplaceholder.typicode.com/users 에 저장된 id가 10까지 있기 때문에 받아온 id가 11인 것을 알 수 있다.
url을 아무렇게나 바꿔서 통신하면(url 마지막을 userstest로 변경)
console.log에 error코드가 나오는 것을 확인할 수 있다.
통신에 실패했기 때문에 Response에도 아무 내용도 나오지 않는다.
