axios 사용법

axios install

---

npm i axios

terminal에 위 코드를 써서 axios를 설치합니다.

 

 

js 파일로 만들기

---

저는 axios를 편하게 쓰기 위해 src/util 밑에 http.js 파일로 따로 만들어 두었습니다.

 

import axios from "axios";

// axios 객체 생성
export default axios.create({
    baseURL: "http://localhost:8080",
    headers: {
        "Content-type": "application/json;charset=utf-8"
    }
});

해당 코드를 적용하면 url을 계속 쓸 필요 없이 편하게 서버와 통신할 수 있습니다.

 

 

통신 코드 작성

---

import http from "@/util/http";

먼저 위 코드를 통해 전에 만들어 놓은 http를 가져옵니다.

 

http
  .get("/account/login", {
  	params: data
  })
  .then((res) => {
  	console.log(res);
  })
  .catch(function (error) {
    if (error.response) {
      // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
  })
  .then(function(){
  	this.isSubmit = true;
  });

그다음 위 코드를 통해 서버와 통신할 수 있습니다.

 

위 코드는 localhost:8080/account/login 이라는 url로 통신하게 되고

파라미터로 params의 data객체를 가져갑니다.

 

응답을 정상적으로 받으면 res에 응답이 담기게 되고 출력됩니다.

정상적으로 받지 못할 경우 .catch로 들어가 에러 처리를 하고

정상적으로 받았던 받지 않았던 마지막 .then 코드를 처리하게 됩니다.