Javascript에서 API를 호출하는 4가지 방법

개발자 여러분 안녕하세요!! 이 게시물에서는 다음 프로젝트에 대한 API 호출을 만드는 다양한 방법에 대해 설명합니다.

🔎 XML HTTP 요청

모든 최신 브라우저는 XMLHttpRequest 개체를 지원하여 서버에서 데이터를 요청합니다.

새 브라우저뿐만 아니라 가장 오래된 브라우저에서도 작동합니다.

ES6에서 더 이상 사용되지 않지만 여전히 널리 사용됩니다.

var request = new XMLHttpRequest();
request.open('GET', 'https://api.github.com/users/anuradha9712');
request.send();
request.onload = ()=>{
    console.log(JSON.parse(request.response));
}

🔎 가져오기

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

약속을 반환합니다.

발생한 응답 또는 오류라는 단일 값을 포함하는 개체입니다.

.then()은 Promise가 완료되면 무엇을 해야 하는지 프로그램에 알려줍니다.

fetch('https://api.github.com/users/anuradha9712')
.then(response =>{
    return response.json();
}).then(data =>{
    console.log(data);
})

🔎 악시오스

HTTP 요청을 만들기 위한 오픈 소스 라이브러리입니다.

브라우저와 노드 js 모두에서 작동합니다

.

외부 CDN을 사용하여 HTML 파일에 포함될 수 있음

가져오기 API와 같은 약속도 반환합니다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios.get('https://api.github.com/users/anuradha9712')
.then(response =>{
    console.log(response.data)
})

🔎 jQuery AJAX

비동기 HTTP 요청을 수행합니다.

$.ajax() 메서드를 사용하여 요청합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$(document).ready(function(){
    $.ajax({
        url: "https://api.github.com/users/anuradha9712",
        type: "GET",
        success: function(result){
            console.log(result);
        }
    })
})

마무리!!

시간 내 주셔서 감사합니다!! 함께 배우고 성장하기 위해 연결합시다.