자바스크립트에서 API 가져오기

기본 가져오기 요청

fetch(url)
.then(response=> response.json())
.then(data => console.log(data));

자바스크립트에서 불러오는 방법입니다. 매우 간단합니다!

아직 끝나지 않았습니다.

Fetch API는 요청 및 응답과 같은 프로토콜의 일부에 액세스하고 조작하기 위한 JavaScript 인터페이스를 제공합니다. fetch() 전에는 XHR(XMLHttpRequest)을 사용했습니다. 가져오기를 사용하는 것은 매우 쉽습니다. Fetch()는 서버에서 리소스를 가져오는 프로세스를 시작하고 Response 개체로 확인되는 Promise를 반환합니다.
따라서 더 이상 XMLHttpRequest가 필요하지 않습니다. 하지만 네, 아약스에는 xhr이 필요합니다.

그러나 XMLHttpRequest는 어떻게 생겼습니까? 쓰는 방법?
보자:

// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();

// Define a callback function
xhttp.onload = function() {
  // Here you can use the Data
}

// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

술책()

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

여기에서는 원하는 서버에서 JSON 파일을 가져와 콘솔에 인쇄합니다. 가장 간단한 fetch() 사용은 가져오려는 리소스의 경로인 하나의 인수를 사용하며 JSON 응답 본문을 직접 반환하지 않고 대신 Response 개체로 해결되는 약속을 반환합니다.

Response 개체는 실제 JSON 응답 본문을 직접 포함하지 않고 대신 전체 HTTP 응답을 나타냅니다. 따라서 응답 객체에서 JSON 본문 콘텐츠를 추출하기 위해 응답 본문 텍스트를 JSON으로 구문 분석한 결과로 해결되는 두 번째 약속을 반환하는 json() 메서드를 사용합니다.

실제 예:

URL 가져오기: https://my-json-server.typicode.com/typicode/demo/posts

fetch('https://my-json-server.typicode.com/typicode/demo/posts')
  .then((response) => response.json())
  .then((data) => console.log(data[0].id));
// output: 1

링크로 이동합니다. 이 URL에서 json을 가져오고 있습니다.



더 많은 예를 보려면 내 codepen 코드FETCH "BRAKING BAD" CHARACTER를 확인하세요.