JavaScript에서 API를 사용하여 데이터를 가져옵니다.

웹 애플리케이션을 구축할 때 HTTP 요청을 만드는 것은 일반적인 작업입니다. JavaScript에는 여러 가지 방법이 있으며 각각 고유한 장점과 사용 사례가 있습니다. 이 게시물에서는 fetch(), axios(), $.ajax() 및 XMLHttpRequest()의 네 가지 인기 메소드를 각각에 대한 간단한 예와 함께 살펴보겠습니다.

1. fetch() 사용
fetch() 함수를 사용하면 HTTP를 요청하여 네트워크에서 리소스를 가져올 수 있습니다. Promise를 사용하므로 비동기 작업을 더 쉽게 처리할 수 있습니다.

예

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. Axios() 사용
axios()는 브라우저나 Node.js 애플리케이션에서 요청을 보내는 데 널리 사용되는 HTTP 클라이언트입니다. 내장된 fetch() API와 유사하지만 요청 및 응답 인터셉터, 자동 JSON 구문 분석 등과 같은 추가 기능이 포함되어 있습니다.

예

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

3. $.ajax() 사용
jQuery로 작업하는 경우 $.ajax() 함수를 사용하여 HTTP 요청을 할 수 있습니다. AJAX 요청 및 응답 처리를 위한 간단한 인터페이스를 제공합니다.

예

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }
});

4. XMLHttpRequest() 사용
XMLHttpRequest 개체는 페이지를 새로 고치지 않고도 URL에서 데이터를 가져오는 쉬운 방법을 제공합니다. fetch() 또는 Axios와 같은 라이브러리보다 약간 낮은 수준이지만 여전히 많은 애플리케이션에서 널리 사용됩니다.

예

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Request failed');
};
xhr.send();

이 예에서는 새 XMLHttpRequest를 생성하고, GET 요청을 열고, 상태 코드를 확인하고 응답 텍스트를 구문 분석하여 응답을 처리합니다.

위 내용은 JavaScript에서 API를 사용하여 데이터를 가져옵니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!