axios 사용하기

일반적으로 javascript에서 네트워크 통신을 하도록 돕는 fetch함수가 있다.
그런데 이 fetch함수보다 네트워크 통신을 더 편하게 도와주는 외부 라이브러리가 있는데 바로 axios다.

1. 외부 라이브러리 불러오기

javascript에서 외부 라이브러리를 사용하기 위해선 script 태그를 이용한다.

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

2. Axios 이용해서 통신하기

1)

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      console.log(axios);
    </script>

-> axios 관련 함수가 나오면서 이제 axios 객체 사용 가능한 것을 볼 수 있다.

2)

    <script>
      axios
        .get("https://jsonplaceholder.typicode.com/todos/1")
        .then(function (result) {
          console.log("통신결과: ", result);
        })
        .catch(function (error) {
          console.log("에러 발생: ", error);
        });
    </script>

status와 data가 굉장히 중요한데
data에 실제로 전달받은 http가 응답한 결과를 확인할 수 있다.

3) status code, data만 불러오기

    <script>
      axios
        .get("https://jsonplaceholder.typicode.com/todos/1")
        .then(function (result) {
          console.log("status code: ", result.status);
          console.log("data: ", result.data);
        })
        .catch(function (error) {
          console.log("에러 발생: ", error);
        });
    </script>