axios 라이브러리 사용법

axios (액시오스)는 현재 뷰 프레임워크 커뮤니티에서
http 통신을 할 때 가장 많이 사용하는 라이브러리이다.

axios 를 어떻게 사용하는지 알아보자.

일단 터미널을 열고 현재 진행중인 프로젝트에 axios 를 설치한다.

npm i install axios

login 통신을 할 때
access token 을 받아오는 POST 요청을 예시로 확인해보자.

submit 버튼을 클릭시 POST 요청으로
아이디와 패스워드 값을 보낼것이기 때문에 Vue Component 내부에서는
methods 안에 함수를 선언해주면 된다.

onSubmit(e) {
      e.preventDefault();
      axios
        .post(`${config.api}/api/seller/login`, {
          loginID: this.idInput,
          password: this.pwInput
        })
        .then(res => console.log(res))
        .then(response => {
          if (response.data.accessToken) {
            localStorage.setItem('user', JSON.stringify(response.data));
          }
          return response.data;
        });
    }

axios로 받아오는 response 객체를 확인해보면,
data 속성이 일반 문자열 형식이 아닌 객체 형태이기 때문에
별도로 JSON.parse() 를 사용하여 객체로 변환할 필요가 없다.

자세한 내용은 axios 공식 깃허브 리퍼지토리를 참고하자.
http://github.com/axios/axios