[JavaScript] 자바스크립트 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>

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

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>

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

출처: https://dev-bak.tistory.com/40 [DEV.Bak:티스토리]