8. 라이브러리 사용하여 AJAX 요청하기

AJAX를 사용하기 위해  외부 라이브러리인 axios를 사용해보자. 

VSCode 터미널에 

npm install axios

를 입력하여 설치해주고 import 후 axios.get()으로 요청할 수 있다. 

import axios from "axios";

<button onClick={()=>{
            axios.get('url').then((data)=>{
                console.log("ajax data: ", data)
            })}}>
 	AJAX 요청
 </button>

axios.get('서버 요청 url').then((가져올 데이터 변수명) => {  코드 입력 });

이렇게 데이터를 가져올 수 있다. ( 변수명.data로 하면 핵심 데이터만 확인할 수 있다. ) 

 

만약, 요청한 url에 문제가 있을 경우 확인하고 싶다면 .catch(()=>{})를 사용하여 확인할 수 있다. 

<button onClick={()=>{
            axios.get('url')
            	 .then((data)=>{console.log("ajax data: ", data)}
                 .catch(()=>{console.log("AJAX 실패"})
                 )}}>
 	AJAX 요청
 </button>