1. axios 외부 라이브러리 다운로드
script 태그를 사용해서 아래 링크를 src로 연결합니다.
저는 html 헤더 부분에 아래와 같이 axios 라이브러리를 불러오는 스크립트 태그를 작성했습니다.
소스 코드
<!-- 스크립트 태그를 사용해서 axios 라이브러리 불러옵니다. -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
다음 스크립트에 log로 axios 객체를 확인해봅시다. 로그로 axios 라이브러리가 제대로 받아졌는지 확인 가능합니다.
소스 코드
<script>
console.log(axios);
</script>
결과
2. 통신 간단 예제
axios는 promise 객체로 비동기로 실행 가능하다. (비동기 promsie 객체에 포스팅으로 바로 가기)
또한 promise 객체는 then, catch를 사용할 수 있다.
then : promise 객체가 성공 한 경우, 실행
catch : promise 객체가 실패 한 경우, 에러 코드 실행
아래 예제를 따라 작성하면서, axios 사용방법을 익혀보도록 하자.
소스 코드
<head>
<!-- 스크립트 태그를 사용해서 axios 라이브러리 불러옵니다. -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- axios는 promise 객체이기 때문에 .then .catch 사용 가능합니다. -->
<script>
axios
.get("https://jsonplaceholder.typicode.com/todos/1")
.then(function (result) {
console.log("통신 결과 : ", result);
console.log("status : ", result.status);
console.log("data : ", result.data);
})
.catch(function (error) {
console.log("에러 발생 : ", error);
});
console.log("바로 실행 로그");
</script>
</head>
결과
result.status, result.data가 200, Object로 반환된것을 확인 할 수 있다.
추가적으로 "바로 실행 로그" 가 가장 위에 로그가 찍히는 것을 확인할 수 있다.
이는 promise 객체가 비동기로 실행되는 것을 알수 있다.
'Front-End > HTML' 카테고리의 다른 글
| [HTML] HTML에서 Flex 레이아웃 기본 문법 (0) | 2021.09.16 |
|---|---|
| [VS Code] Open in browser 설치 및 크롬(default)으로 실행 (0) | 2021.09.16 |
| [VS Code] HTML 환경 세팅 - Extensions (0) | 2021.07.25 |
| [HTML] HTML 태그 기본 문법 (1) | 2021.07.25 |