Vanilla JavaScript에서 가져오기 실행하기

Javascript 여정을 시작하면서 직접 만든 데이터로 작업하는 데 익숙할 것입니다. 시간과 일관된 연습을 통해 타사 서버에서 더 큰 데이터베이스를 활용할 준비가 된 시점에 도달하게 될 것입니다. 제 생각이 맞다면 지금이 바로 그 시기라고 말하는 것이 안전합니다. 여기 다시.

두려워하지 마세요, 내 코딩 아기들! 이 블로그 게시물을 마치면 가져올 준비가 완료됩니다!

페치란 무엇입니까?

fetch() 요청을 사용하면 개발자가 웹 브라우저에서 비동기 HTTP 요청을 서버로 보내고 데이터가 수신되면 응답 형식으로 약속을 반환하여 데이터에 액세스(또는 윙크 윙크, 가져오기)할 수 있습니다.

JavaScript에서 API에 첫 번째 Fetch() 요청을 보낼 수 있습니다.

먼저 원하는 API의 URL로 fetch() 함수를 호출해 보겠습니다. 더 깨끗한 코드를 선호하는 경우 API URL로 변수를 초기화하고 변수를 가져오기 함수에 대한 인수로 전달합니다.

이 예에서는 가짜 API를 사용하지만 필요에 맞는 API를 자유롭게 사용할 수 있습니다.

const baseURL = "https://jsonplaceholder.typicode.com/posts";

fetch(baseURL)

fetch() 메서드는 약속을 반환하므로 .then()를 사용하여 응답을 처리할 수 있습니다.

fetch(baseURL)
.then(response => ?)

첫 번째 프라미스와 함께 해결된 프라미스의 정보를 JSON으로 반환하는 메서드.json()를 추가해야 합니다.
결과는 본질적으로 JSON이 아니라 JavaScript 개체를 생성하기 위해 가져온 JSON입니다.

fetch(baseURL)
.then(response => response.json())

.json() 뒤에 괄호를 추가하는 것을 잊지 마세요! 함수와 마찬가지로 괄호가 생략되면 메서드를 호출할 수 있는 방법이 없습니다.

이제 두 번째.then() 방법을 사용할 차례입니다. 여기서는 콘솔의 API에서 방금 받은 데이터를 기록하고 있습니다. 내가 기록하는 데이터는 우리가 충족해야 하는 결과물에 사용할 데이터입니다.

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

우리가 "응답"과 "데이터"에 부여한 이름도 고정되어 있지 않습니다.

fetch(baseURL)
.then(res => res.json())
.then(bakeryData => console.log(bakeryData))

이와 같은 이름 지정 형식은 원래 예제만큼 유효합니다. 변수 이름이 일치하는지 확인하십시오!
가독성을 위해 "데이터"가 아닌 다른 이름을 지정하려는 경우 데이터가 참조하는 내용을 암시하는 이름을 사용하는 것이 좋습니다.

콘솔에서 렌더링되는 것

여기에 객체 배열이 있습니다. 이렇게 반복하고 DOM에 렌더링할 준비가 되었습니다!

마지막 생각들

제가 배운 지식을 여러분의 프로젝트에 적용할 수 있기를 바랍니다. 어려움을 겪고 있는 단계가 있는 경우 잠시 시간을 내어 코드를 다시 읽거나 제가 제공한 리소스를 아래에서 살펴보고 부족한 부분을 보완하고 채우십시오.

알아야 할 용어

-비동기 - 이전 작업이 완료되기 전에 다른 작업을 실행할 수 있습니다.

-AJAX - 비동기 JavaScript 및 XML을 나타냅니다. AJAX는 사용자가 페이지를 탐색하는 동안 비동기 서버 상호 작용을 허용합니다.

-GET 요청 — API에서 데이터를 검색하거나 "가져오는"데 사용됩니다.

-POST 요청 — 데이터를 업로드하거나 추가하는 데 사용됩니다.

-PATCH/PUT 요청 — 데이터베이스에 이미 있는 데이터를 편집하는 데 사용됩니다.

-DELETE 요청 — 데이터를 삭제하는 데 사용됩니다.

자원

MDN Fetch Documentation
MDN Promise Documentation
Free Fake API