[Vue 기초 7] axios 비동기

axios

• vue에서 권장하는 HTTP 통신 라이브러리
• 브라우저와 Node.js에서 실행되는 Promise기반의 HTTP 통신 라이브러리
• Ajax 요청을 보내고 응답을 받는 것 뿐만 아니라 요청 및 응답을 변환, 중단 등 다양한 기능 제공

axios vs fetch
axios
- HTTP 요청과 응답을 자동으로 JSON 데이터로 변환
- Interceptors 제공 (요청과 응답을 변환하거나 중단 가능)
- 설치 후 사용

fetch
- 기본적으로 문자열로 반환하며, 이를 수동으로 JSON으로 변환
- Interceptors 제공 x
- 설치할 필요 없음 (브라우저에서 기본 제공)

 

axios 설치

CDN 방식

<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

 

NPM 방식

npm install axios

 

axios API

다음 API에 맞추어 비동기 통신을 진행하는 코드를 작성해보자!

 

우선 아래와 같이 util/http-common.js 파일을 만들어 주고,

import axios from "axios";

// axios 객체 생성
export default axios.create({
  baseURL: "http://localhost:8888",
});

 

다음과 같이 선언해서 사용하면 된다!

import httpCommon from "@/util/http-common";

 

이와 같이 baseURL을 한번만 설정하면, 애플리케이션 전체에서 사용할 수 있기 때문에 다른 컴포넌트나 모듈에서 API 요청을 보내기 위해 axios를 사용할 때마다 baseURL을 설정하는 번거로움을 줄일 수 있고, baseURL이 변경되거나 인터셉터, 인증 토큰과 같은 공통 요청 처리 로직을 추가하고자 할 때, 이 파일만 수정하면 되기 때문에 유지보수성과 코드 재사용성을 높일 수 있다!

요약 
코드의 중복을 줄이고, 유지보수성 및 재사용성을 높일 수 있음!

 

 

* GET의 경우 페이지를 이동하면서, data를 가져오기 때문에 created(){...} 부분에 작성해주었다.

* 나머지,POST/PUT/DELETE의 경우는 event를 통해 실행되므로 methods : { .. } 내에 정의해주었다.

GET

httpCommon.get("/book").then(({ data }) => {
  this.books = data;
});

 

if (this.type != "create") {
  httpCommon.get(`book/${this.$route.params.isbn}`).then(({ data }) => {
    this.isbn = data.isbn;
    this.title = data.title;
    this.author = data.author;
    this.price = data.price;
    this.content = data.content;
  });
}

{data}는 response.data와 같은 표현이다! (객체 분해 할당, destructuring assignment)

 

POST

registBook() {
  httpCommon
    .post("/book", {
      isbn: this.isbn,
      title: this.title,
      author: this.author,
      price: this.price,
      content: this.content,
    })
    .then(({ data }) => {
      let msg = "등록 처리 시 문제가 발생했습니다!";
      if (data === "success") {
        msg = "등록이 완료되었습니다!";
      }
      alert(msg);
      this.moveList();
    });
},

 

PUT

modifyBook() {
  httpCommon
    .put("/book", {
      isbn: this.isbn,
      title: this.title,
      author: this.author,
      price: this.price,
      content: this.content,
    })
    .then(({ data }) => {
      let msg = "수정 시 문제가 발생했습니다!";
      if (data === "success") {
        msg = "수정이 완료되었습니다!";
      }
      alert(msg);
      this.moveList();
    });
},

 

DELETE

deleteBook() {
  if (confirm("삭제 할까요?")) {
    httpCommon.delete(`/book/${this.book.isbn}`).then(({ data }) => {
      let msg = "삭제 시 문제가 발생했습니다!";
      if (data === "success") msg = "삭제가 완료되었습니다!";
      alert(msg);
      this.$router.push({ name: "BookList" });
    });
  }
},

 

 

++ 다음과 같은 방식으로도 사용 가능하다!

axios({
    method : 'get', // 'get', 'post', 'put', 'delete' 사용 가능
    url : '/board', // 요청 url
    // data {'category':'food', 'subject':'닭강정'} // post, put, delete의 경우
});

- GET 요청의 경우, data 옵션 대신에 params 옵션을 사용하여 Query String을 전달
- DELETE는 요청의 경우, body에 데이터를 담아서 보내는 것이 아니라, 요청 URL에 데이터를 포함시켜 보내는 것
  ( 따라서 axios.delete()의 data 옵션은 요청 URL에 포함될 데이터를 설정하는 것 )