fetch()

window.fetch() - дозволяє робити AJAX запити. Це нова альтернатива XMLHttpRequest яка побудована на Promise.

Синтаксис:

window.fetch( url, options);

Параметри:

window не обов'язково вказувати. Об'єкт window.

url - рядок який містить URL адресу на який потрібно відправити запит.

options - не обов'язково вказувати. Об'єкт який містить додаткові параметри запиту:

method - рядок з назвою методу запиту: "GET", "HEAD", "POST".
headers - об'єкт заголовок запиту.
body - тіло запиту.
mode – режим крос-доменості: "same-origin", "no-cors", "cors".
credentials – чи відправляти куки: "same-origin", "include", "omit".
cache – режим кешування: "default", "no-store", "reload", "no-cache", "force-cache", "only-if-cached"
redirect – режим переадресації: "follow" або "error".

Опис:

fetch() метод об'єкта window який дозволяє робити AJAX запити на основі Promise.

fetch() повертає Promise який при отримані відповіді від сервера виконує вказану функцію в якій передається об'єкт response як параметр.

response

clone() - повертає копію об'єкту.
arrayBuffer() - повертає Promise результатом якого буде масив даних.
blob() - повертає Promise результатом якого будуть двійкові дані.
formData() - повертані Promise результатом якого будуть дані FormData.
json() - повертає Promise результатом якого будуть дані формату JSON.
text() - повертає Promise результатом якого будуть текстові дані.
type - рядок з назвою типу даних.
url - URL адреса відповіді від сервера.
status - код статусу відповіді.
statusText - назва статусу відповіді.
ok - логічне значення,чи завантажено без помилок тобто статус від 200 до 299.
bodyUsed - логічне значення, чи завантажено body.
headers - об'єкт для роботи з заголовком. Містить наступні методи:
- append() - додає значення у заголовок.
- delete() - видаляє значення з заголовка.
- get() - повертає вказане значення заголовка.
- set() - задає значення.
- getAll() - повертає усі заголовки.

fetch('/').then(function(response){
alert( response.status );
});

За замовчуванням fetch() не відправляє і не отримує куки з сервера. Щоб дозволити куки вкажіть у параметрі options опцію credentials: 'same-origin'.

fetch('/', {credentials: 'same-origin'}).then(function(response){
alert( response.headers.getAll() );});

fetch() не підтримує синхроного запиту, а лише асинхроний. Тому якщо Вам необхідний синхроний запит - використовуйте XMLHttpRequest.

Приклад:

fetch('/').then( 
  function(a){ a.text().then(
    function(data){ alert(data); });
  
});

fetch('/').then( 
  function(a){ return a.text(); }).then(function(text){ alert(text); });

Отримання результату формату JSON за допомогою fetch():

fetch('/dani/test.json').then(function(response){
	response.json().then( function(e){alert(e.name);} );
});

fetch('/ajax.php?act=test_users').then(function(res){
  res.json().then(function(data){
      var ul=document.getElementById('test');
      for(var i=0;i<data.users.length;i++){
        var li=document.createElement('li');
        li.innerText=data.users[i].name;
        ul.appendChild(li);
      }
    }, function(e){alert(e);});
});

Відправлення даних JSON методом POST за допомогою fetch():

fetch('/ajax.php?act=test_post',
  {
    method:"POST",
    headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" },
    body:"name=test&id=3"}
).then(function(res){alert(res);});

var ob={name:"тест", id:2};

fetch('/ajax.php?act=test_post',
  {
    method: 'POST',
    headers: { 'Content-type': 'application/x-www-form-urlencoded' },
    body: 'name='+ob.name+'&id='+ob.id }
).then(
  function(res){
    //отримуємо результат json
    res.json().then(function(a){ alert( a.name ); });
  },
  function(er){
    alert(er);
});