Интерфейс Fetch API

Введение в программный интерфейс Fetch API c примерами

Сообщу банальную вещь: IT бурно развивается. Поэтому решил добавить в раздел AJAX материал по Fetch API, в котором описаны современные приемы асинхронного программирования.

Знакомимся с Fetch API

Программный интерфейс Fetch API предоставляет более гибкий и мощный набор средств асинхронного получения данных по сравнению с XMLHttpRequest.

Включает ряд ресурсов для работы:

• fetch()— основной метод для получения данных;

• Headers — интерфейс, описывает методы для работы с HTTP заголовками запроса и ответа;

• Request — интерфейс, описывает свойства и методы для осуществления HTTP запросов;
• Response — интерфейс, описывает свойства и методы для обработки HTTP отклика.

fetch() — основной метод API асинхронного получения ресурсов, входит в состав миксина WindowOrWorkerGlobalScope, а это означает, что в браузере метод глобальный. Возвращает промис, который содержит объект отклика Response. При успешном завершении запроса, должно выполняться равенство fetch().response.ok === true. Если в результате запроса генерируется ошибка сети(но не сервера) при доставке ресурса, например, по таймауту, промис возвращает  объект TypeError , поясняющий, причину ошибки. Повторюсь, статус 404 в этом случае сетевой ошибкой не является.

Синтаксис метода прост.

promise = fetch(input[, init])

где
input — определяет запрашиваемый ресурс, может быть строкой URL, объектом запроса Request;
init — объект, позволяющий установить дополнительные опции запроса. Например, метод запроса(GET, POST и др.), HTTP заголовки, тело запроса, режим запроса(cors, no-cors,same-origin ) и множество других, с которыми можно познакомиться по ссылке на метод;
promise — возвращаемое значение — объект Promise, с помощью которого и производится обработка отклика, будь то данные или ошибка.

Пример использования метода fetch()

Ниже приведен пример использования Fetch API.

	fetch('Ваша_адресная_строка')
	    .then(function(response) {
	        if(response.status !== 200)  {
                    alert('Ресурс по адресу \n' + response.url + '\n не получен, 
код ошибки ' + response.status + ' - ' + response.statusText);
		} else {
// определяем формат отклика и выводим данные на страницу
                    if (response.headers.get('Content-Type').indexOf('text/html') > -1 ) {
		        response.text().then(function(data) {
                              showData(data);
                          });
                    }
		}
	    })
 
// выводит строку на страницу
       function showData(str) {
           var elem = document.createElement('div');
           elem.id = 'target';
           elem.style = "color: blue;";
           document.getElementById('request').after(elem);
           document.getElementById('target').innerHTML = str;
       }

Небольшое пояснение к примеру. В приведенном коде на сервер отправляется асинхронный запрос и получаем, как было сказано, promise. Пришедший промис позволяет проверить состояние HTTP-запроса, проверить заголовки отклика, но тело отклика на этом этапе недоступно. Чтобы получить данные отклика, надо выполнить один из методов отклика, заточенных для конкретного формата данных, что и выполняет код.

Итак, после отправки fetch запроса метод .then промиса анализирует отклик response с помощью функции обратного вызова. Если в статусе отклика нет кода 200, выводим на экран сообщение о неудаче в запросе. При удачном завершении с помощью объекта response.headers убеждаемся, что отклик в формате HTML, и методом отклика response.text() принимаем из потока данные. Указанный метод также возвращает промис, поэтому вновь используем функцию обратного вызова следующего(второго) метода .then(), чтобы вывести принятое сообщение на страницу.

Ниже приведена кнопка «Выполнить запрос», демонстрирующая работу Fetch API. При обычном клике вы увидите на странице сообщение, пришедшее в отклике, при клике с зажатой клавишей Ctrl запрос уйдет по ошибочному адресу и на экран будет выведено сообщение об ошибке.