AJAX fetch 사용하기

AJAX. 비동기로 데이터 가져오기 ! 

데이터를 가져오는 법 :  1) 정확한 URL 입력 2) GET 요청 

 

GET 요청을 서버에 날리는 방법

1. URL을 직접 입력창에 입력

2. 버튼으로 GET 요청 날리기. HTML 버튼 SUBMIT. 근데 새로고침됨. 

3. AJAX : 새로고침없이 서버에게 GET 요청  -> 부드럽게 데이터를 주고받을 수 있음.

 

JS로 AJAX 하는 법 

fetch(url) // url로 get 요청을 보낸다. 
	.then((response)=>{ //.then : 값을 가져온다. then 안에는 callback 함수가 담긴다. (응답 끝나면 이 함수를 실행해줘!) 
    	if(!response.ok){
        	throw new Error('에러')
        }
        return response.json()
    })
    
console.log(1);
console.log(2);

동기로 실행됐다면, fetch 함수가 실행되는 즉 응답이 올 때까지 다음 코드를 실행할 수 없음.

하지만 비동기이므로, 그 다음 코드를 실행할 수 있다. 

 

response 객체에는 

body, header, ok, status, type 등이 담긴다. 

 

axios 라이브러리를 사용해서 데이터를 가져올 수도 있다.

axios.get('url')
	.then((result)=>{
    	console.log(data)
    }).catch(()=>{
    	console.log('에러')
    });