Асновы работы з fetch у AJAX

Давайце зараз паглядзім, як падгрузіць частку старонкі з дапамогай AJAX. Хай на нашай старонцы index.html будзе размешчаны дзів і кнопка (тут паказана змесціва 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.

Для гэтага для пачатку атрымаем у зменныя спасылкі на нашы элементы:

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 верне проміс. Справа ў тым, што запыт старонкі праз 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); // тэкст старонкі
    }
  );
});

Такім чынам, мы нарэшце атрымалі тэкст запытанай старонкі і можам, напрыклад, запісаць яго ў наш дзів:

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