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에도 아무 내용도 나오지 않는다.

참고자료

https://www.inflearn.com/course/age-of-vuejs/dashboard