AJAX에서 fetch 사용의 기본

이제 AJAX를 사용하여 페이지의 일부를 로드하는 방법을 살펴보겠습니다. 우리 페이지 index.html에 div와 버튼이 있다고 가정해 봅시다 (여기서는 body의 내용을 보여줍니다):

public/index.html<div></div>
<button>click me</button>

또한 세 개의 단락이 있는 페이지 ajax.html가 있다고 가정해 봅시다 (페이지 태그 없이, 단순히 단락들):

public/ajax.html<p>1</p>
<p>2</p>
<p>3</p>

index.html 페이지의 버튼을 클릭했을 때 ajax.html 페이지의 내용이 div에 로드되도록 만들어 봅시다.

이를 위해 먼저 요소에 대한 참조를 변수에 담아봅시다:

public/client.jslet div    = document.querySelector('div');
let button = document.querySelector('button');

버튼에 클릭 핸들러를 부착해 봅시다:

public/client.jsbutton.addEventListener('click', function() {
  // 여기서 AJAX 요청을 수행할 것입니다
});

이제 AJAX 요청을 수행해 봅시다. 이를 위해 가져오려는 콘텐츠의 페이지 주소를 매개변수로 받는 fetch 함수가 사용됩니다. 우리 서버에 있는 ajax.html 페이지의 주소를 지정합시다:

public/client.jsbutton.addEventListener('click', function() {
  let result = fetch('/ajax.html'); 
});

fetch는 결과로 프로미스(Promise)를 반환합니다. AJAX를 통한 페이지 요청은 비동기 작업이기 때문입니다. 페이지가 응답하기까지 일정 시간이 걸릴 것입니다.

프로미스의 결과를 받아봅시다:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // 서버 응답은 response 변수에 있습니다
  });
});

불필요한 변수를 제거하여 간소화해 봅시다:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(function(response) {
    
  });
});

화살표 함수를 사용하여 간소화해 봅시다:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    
  });
});

더 읽기 쉬운 형태로 나타내 봅시다:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      
    }
  );
});

response 변수에는 Response 클래스의 상당히 복잡한 객체가 포함되어 있습니다:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    console.log(response); // Response 클래스의 객체
  });
});

이 객체에 대해 자세히는 다음 강의에서 공부할 것이며, 지금은 가장 간단한 것 - 요청된 페이지의 텍스트를 가져오는 것이 필요합니다. 이를 위해 이 객체에는 text 메서드가 있습니다. 그러나 이 메서드는 페이지 텍스트 자체가 아니라, 해당 텍스트를 가진 프로미스를 반환합니다:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      console.log(response.text()); // Promise를 출력합니다
    }
  );
});

페이지 텍스트에 도달하려면, response.text에서 얻은 프로미스를 한 번 더 처리해야 합니다:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text); // 페이지 텍스트
    }
  );
});

드디어 요청된 페이지의 텍스트를 얻었으니, 예를 들어 우리 div에 이를 기록할 수 있습니다:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      div.innerHTML = text;
    }
  );
});