기존에 ajax를 통해서 데이터를 불러올 때 너무 느려서 fetch를 사용 해보았는데 속도가 훨씬 빠르다.

최신 웹 개발에서는 ajax보다 fetch가 직관적이고 더 일반적으로 사용 된다.

fetch

fetch는 서버와 통신하고 요청과 응답을 통해 데이터를 가져 올 수 있는 JavaScript의 비동기적 내장 함수이다.

응답을 promise 기반으로 하고 then과 catch 두 메서드를 사용해서 비동기 코드를 관리 할 수 있다.

fetch api로 데이터 받아와서 더 보기 기능 구현하기!

html

<section>
  	<div class="content-area">
        <h1>데이터 받아 올 목록</h1>
      
        <ul class="lists">
        </ul>
      
        <div class="btn-area">
          <button class="more-view">더 보기</button>
        </div>
      
  	</div>
</section>

javascript

const loadMoreButton = document.querySelector(".more-view");
const lists = document.querySelector(".lists");
let startIndex = 0;
const itemsToAdd = 20;
const dataUrl = 'https://jsonplaceholder.typicode.com/posts';

function fetchMoreData() {
    fetch(dataUrl)
  
        .then(response => {
            if (!response.ok) {
              throw new Error("데이터를 불러오는 데 실패했습니다.");
            }
            return response.json();
    	})
  
        .then(data => {
            for (let i = 0; i < itemsToAdd; i++) {
                if (startIndex < data.length) {
                    const item = data[startIndex];
                    const listItem = document.createElement("li");
                    listItem.textContent = `내 id는 ${item.id} 입니다~~`;
                    lists.appendChild(listItem);
                    startIndex++;
                }
             }

            if (startIndex >= data.length) {
              loadMoreButton.classList.add('disable')
            }
        })
  
        .catch(error => {
            // 예외 처리: 네트워크 문제 또는 기타 오류 처리
            console.error(error);
      	});
}

loadMoreButton.addEventListener("click", fetchMoreData);
fetchMoreData();

response.json()을 return 해주는 이유

응답(response) 객체는 json() 메서드를 제공하고, 이 메서드를 호출하면
response 객체로부터 JSON 형태의 데이터를 자바스크립트 객체로 변환하여 얻을 수 있다.

then이 두 번 사용되는 이유

첫 번째 then은 HTTP 응답을 처리 하고, 응답이 성공인지 확인 한다.
실패시 에러를 던져준다.

두 번째 then은 응답이 성공인 경우 JSON데이터를 처리 한다.

조금 더 쉽게 말하자면 첫 번째 then은 우리가 서버에서 데이터를 요청 했을 때, 그 응답이 성공인지 확인을 하고, 만약 문제가 있다면 에러를 던지고 멈추는 것이다.

두 번째 then은 응답이 성공적인 경우에 동작한다.
이 부분에선 서버에서 받은 데이터를 가지고 원하는 작업을 수행 하면 된다.