반응형
JavaScript에서 API 호출을 수행하는 4가지 방법
이번 튜토리얼에서는 자바스크립트로 API를 호출하는 방법을 보여드리겠습니다. JavaScript에서는 HTTP 요청을 작성하고 서버/데이터베이스에서 동적 데이터를 검색하는 방법을 아는 것이 정말 중요했습니다. JavaScript는 API와 상호 작용하기 위해 일부 내장 브라우저 개체와 일부 외부 오픈 소스 라이브러리를 제공합니다.
xmlHttp.html
let request = new XMLHttpRequest();
request.open("GET", "<a href=https://jsonplaceholder.typicode.com/users>https://jsonplaceholder.typicode.com/users</a>");
request.send();
request.onload = () => {
console.log(request);
if (request.status === 200) {
// by default the response comes in the string format, we need to parse the data into JSON
console.log(JSON.parse(request.response));
} else {
console.log(`error ${request.status} ${request.statusText}`);
}
};
fetch.html
async function getUsers() {
let response = await fetch(
"<a href=https://jsonplaceholder.typicode.com/users>https://jsonplaceholder.typicode.com/users</a>"
);
let data = await response.json();
return data;
}
getUsers().then(data => console.log(data));
axios.html
axios
.get("<a href=https://jsonplaceholder.typicode.com/users>https://jsonplaceholder.typicode.com/users</a>")
.then(response => {
console.log(response.data);
})
.catch(error => console.error(error));
jquery-ajax.html
$(document).ready(function() {
$.ajax({
url: "<a href=https://jsonplaceholder.typicode.com/users>https://jsonplaceholder.typicode.com/users</a>",
type: "GET",
success: function(result) {
console.log(result);
},
error: function(error) {
console.log(error);
}
});
});
소스 코드: https://github.com/jayanthbabu123/all-possible-ways-making-api-call-javascript
반응형