자바스크립트 API 호출 방법

안녕하세요.
이번 포스팅에서는 자바스크립트에서 API 호출하는 방법에 대해서 알아보겠습니다.

1. XML HTTP Request를 이용한 방법
- 모든 최신 브라우저는 서버에 데이터를 요청하기 위해 XMLHttpRequest 객체를 지원합니다.
- 최신 브라우저뿐만 아니라 가장 오래된 브라우저에서도 작동을 합니다.
- ES6에서는 더 이상 사용되지 않지만 여전히 널리 사용이 되고 있습니다.

  var request = new XMLHttpRequest();
  request.open('GET', 'https://www.fruityvice.com/api/fruit/all');
  request.send();
  request.onload = function() {
  	console.log(JSON.parse(request.response));
  }

 

2. Fetch API를 이용한 방법
- Fetch API는 비동기 방식으로 리소스(네트워크 포함)를 가져오기 위한 인터페이스를 제공합니다.
- Fetch API는 Promise를 반환합니다.

fetch('https://www.fruityvice.com/api/fruit/all')
 	.then(res => res.json())
    .then(data => console.log(data));

 

3. Axios를 이용한 방법
- HTTP 요청을 만들기 위한 오픈 소스 라이브러리입니다.
- 브라우저와 NodeJS 모두에서 작동을 합니다.
- 외부 CDN을 사용하여  HTML에 포함시킬 수 있습니다.
- Fetch API와 동일하게 Promise를 반환합니다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios.get('https://www.fruityvice.com/api/fruit/all')
		.then(res => res.data)
        .then(data => console.log(data));
</script>

 

4. jQuery AJAX를 이용한 방법
- 비동기 HTTP 요청을 수행합니다.
- $.ajax() 메서드를 사용해서 요청을 보냅니다.

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
	$(document).ready(function() {
		$.ajax({
			url: 'https://www.fruityvice.com/api/fruit/all',
			type: 'GET',
			success: function(result) {
				console.log(result);
			}
		})
	});
</script>

 

여기까지 부족한 글 읽어 주셔서 감사합니다💛