가져오기 요청을 만드는 방법

코딩 부트 캠프의 첫 번째 단계에서 가져오기 요청을 수행하는 방법을 배웠습니다. 처음에는 혼란스러웠지만, 약간의 연습 후에 그것이 얼마나 유용할 수 있는지 깨달았습니다.

가져오기 요청은 데이터베이스에서 데이터를 검색하는 방법입니다. 페이지가 로드된 후 데이터를 DOM에 추가할 수 있으므로 렌더링 시간을 줄이는 데 도움이 됩니다. 가져오기는 창 개체에서 호출되는 전역 메서드입니다.

가져오기 요청에는 GET, POST 및 DELETE와 같은 몇 가지 유형이 있습니다. 저는 1단계 프로젝트에서 사용한 GET 요청에 집중하고 있습니다. 시작하는 데 필요한 것은 선택한 데이터베이스에 대한 URL 링크뿐입니다.

가져오기 요청을 설정하는 기본 방법은 URL 문자열을 인수로 전달하고 데이터를 JSON으로 변환하고 콘솔에 기록하는 몇 가지 .then() 메서드를 추가하는 것입니다. 작업할 수 있도록 데이터를 JSON으로 변환해야 합니다.

fetch(“URL of your choice")
       .then(response => response.json())
       .then(data => console.log(data))

작업할 수 있는 어레이로 반환된 콘솔 로그의 데이터가 표시되어야 합니다. 이 스크린샷은 객체 키 결과 아래에 반환된 3개의 중첩 배열을 보여줍니다.



데이터를 JSON으로 변환하지 않고 요청을 설정하는 경우 콘솔에서 가져오기 요청의 응답만 기록합니다. 이것은 우리가 쉽게 작업할 수 있는 데이터를 제공하지 않으므로 가져오기 응답 데이터를 JSON으로 변환하는 .then 메서드를 포함해야 합니다. 다음은 JSON으로 변환되지 않은 콘솔 로그 데이터의 예입니다.

fetch("https://www.dnd5eapi.co/api/spells/")
            .then(data => console.log(data))

기본 가져오기 레이아웃에서 두 번째 .then 내에서 가져온 데이터로 원하는 작업을 빌드할 수 있습니다. 내 프로젝트에서 중첩된 결과 배열(아래 참조)에서 forEach를 사용하여 요소를 만들고 추가하여 가져온 데이터를 웹 페이지에 표시하는 코드를 설정했습니다. 전체 가져오기 요청은 사용자가 검색 양식에 무언가를 제출할 때 호출되는 함수 내에서 작성되었습니다.

function fetchSpells() {
        return fetch(`https://www.dnd5eapi.co/api/spells/?name=${document.getElementById("search-spells-form").value}`)
          .then(response => response.json())
          .then(data => data.results.forEach((element) => {
            console.log(element)
            let obj = element

            const spellsDiv = document.getElementById('spells-container')

            const ul = document.getElementById('spell-name')

            const h3 = document.createElement('h3')
            h3.innerHTML = obj.name

            const a = document.createElement('a')
            a.innerHTML = `https://www.dnd5eapi.co${obj.url}`
            a.href = `https://www.dnd5eapi.co${obj.url}`

            spellsDiv.append(ul)
            ul.append(h3)
            ul.append(a)
        }))

가져온 데이터에 대해 forEach 메서드를 설정하려고 할 때 다음과 같이 설정했기 때문에 막혔습니다.

.then(data => data.forEach(element => console.log(element)))

"data.forEach는 함수가 아닙니다."라는 오류를 반환했습니다. 몇 시간 동안 온라인 검색, 시행 착오, 좌절 끝에 누군가와 이야기를 나눈 후 문제를 파악했습니다. 우리는 내가 사용하고자 하는 데이터가 객체 키 "results"에 내포되어 있다는 것을 깨달았습니다. "결과"를 추가하기만 하면 되었습니다. forEach가 작동하기 전에.

또한 가져오기 요청 유형에 "method: GET"을 명시할 필요가 없다는 것도 배웠습니다. 기본적으로 그렇게 하기 때문입니다. 메서드는 다른 가져오기 요청 유형에 대해서만 지정하면 됩니다.

이것이 가져오기 요청에 대해 배우는 다른 사람들에게 도움이 되기를 바랍니다. 행복한 가져오기!

자원:
"Fetch API - 웹 API: MDN."웹 API | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API .