Axios 기초 배우기 #3 (POST 방식으로 통신하기)

저번 예제와 마찬가지로 axios의 github페이지에 있는 예제로 POST 방식으로 통신해보겠다.

 

 

 

src/views/Login.vue

<template>
  <v-container fill-height style="max-width:450px;">
    <v-layout align-center row wrap>
      <v-flex xs12>
        <v-alert type="error" :value="isLoginError">
          아이디와 비밀번호를 확인하세요
        </v-alert>
        <v-alert type="success" :value="isLogin">
          로그인 성공
        </v-alert>
        <v-card>
          <v-toolbar flat color="blue-grey lighten-5">
            <v-toolbar-title>로그인</v-toolbar-title>
          </v-toolbar>
          <div class="pa-3">
            <v-text-field v-model="email" label="이메일을 입력하세요">
            </v-text-field>
            <v-text-field
              v-model="password"
              type="password"
              label="패스워드를 입력하세요"
            >
            </v-text-field>
            <v-btn
              block
              large
              depressed
              color="primary"
              @click="login({ email, password })"
              >로그인</v-btn
            >
            <v-btn @click="test">테스트</v-btn>
            <v-btn @click="postTest">POST 테스트</v-btn>
          </div>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>
\
<script>
import { mapState, mapActions } from "vuex";
import axios from "axios";

export default {
  data() {
    return {
      email: null,
      password: null,
    };
  },
  computed: {
    ...mapState(["isLogin", "isLoginError"]),
  },
  methods: {
    ...mapActions(["login"]),
    test() {
      axios
        .get("https://reqres.in/api/users?page=2")
        .then((res) => {
          // handle success
          console.log(res);
        })
        .catch((err) => {
          // handle error
          console.log(err);
        })
        .then(() => {
          // always executed
          console.log("test");
        });
    },
    postTest() {
      axios
        .post("https://reqres.in/api/register", {
          email: "eve.holt@reqres.in",
          password: "pistol",
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

POST 테스트 버튼을 만들어 주고 reqres.in에 서버통신을 요청할 것이다.
POST 방식으로 통신할 때는 body에 값을 담아주어야 한다.

 

 

성공하게 되면 id와 token을 받아오게 된다.

 

 

id와 token을 data로 받아왔다.

 

 

 

 

 

GET 방식과 POST 방식의 차이점은 다른 블로그에 자세히 설명을 적힌 것이 있어서 링크를 가져왔다.

[네트워크] get 과 post 의 차이