Fetch API

Современный сайт трудно представить без запросов к серверу. Все большее и большее количество страниц не требуют перезагрузки страницы при переходе по ссылкам, а всего лишь получают новые данные и перерисовывают необходимые блоки. Использование XMLHttpRequest уже не «торт», так как большинство современных браузеров поддерживают fetch API.

Давайте посмотрим как он работает.

Для начала вспомним как выглядит код для привычного ajax-запроса:

var requestl
if (window.XMLHttpRequest) {
  request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  try {
    request = new ActiveXObject('Msxml2.XMLHTTP');
  } catch(e) {
    try {
      request = new ActiveXObject('Microsoft.XMLHTTP');
    } catch(e) {
        // выводим ошибку
    }
  }
}

request.open('GET', '/some/url', true);
request.send(null);

Не очень элегантно, но дейтсвенно и кроссбраузерно.

А теперь fetch:

fetch('/some/url', {
    method: 'get'
}).then(function(response) {
    // обработка результата
}).catch(function(err) {
    // обработка ошибки
});

Этот запрос слишком прост. А что если надо поменять заголовки headers?

var request = new Request('/some/url', {
    headers: new Headers({
        'Content-Type': 'text/plain',
        'X-My-Custom-Header': 'CustomValue'
    })
});

fetch(request).then(function() { /* обработчик результатов */ });

А если необходимо сделать POST запрос с отправкой данных:

fetch('/some/url', {
    method: 'post',
    body: JSON.stringify({
        email: document.getElementById('email').value
        password: document.getElementById('password').value
    })
});

Замечу, что в первом then вы не получите данные в response. Для работы с ответом необходимо вернуть response.json(). Вот пример:

fetch('/some/url')
    .then(function(response) { 
        // конвертируем ответ в json
        return response.json();
    }).then(function(data) {
        // а вот и наши данные
        console.log(data); 
    });

А если не json, то:

response.text();
response.blob();

Fetch API

Комментарии