Fetch API предоставляет более гибкое и лучшее решение для отправки http запросов к серверу нежели чем всем знакомый XMLHttpRequest. В чем же преимущество?

А в том что Fetch api в своей структуре использует promise(обещания), которые позволяют использовать более чистый и простой API.

Для работы с данным api используется метод fetch(). Он может принимать в себя два аргумента:

- путь по которому будет совершен запрос

- Дополнительные опции запроса

Допустим мы хотим получить содержимое файла entry.json который находится на сервере:

fetch('/js/entry.json').then(function(response) {
        if(response.status === 200){
            return response.text();
        }else{
            console.log('Подключения к сети нет ');
        }
    }).then(function(result) {
        console.log(result);
    });

C помощью данного кода мы получим содержимое файла entry.json в текстовом формате. В качестве аргумента метода fetch мы указываем путь до файла который хотим прочитать и дальше на выходе получаем объект promise. Напомню что объект promise это объект который содержит свое состояние.(fulfilled - выполнено, rejected - выполнено с ошибкой).

Дальше работая с объектом promise мы с помощью обработчика then получаем его ответ response и проверяем статус.

Если статус равняется 200(response.status === 200) , то мы приводим ответ к текстовому виду с помощью метода text() и возвращаем его. В другом случае у нас произойдет ошибка и вывод сообщения в консоль. Причиной может быть неправильно указанный путь.

Если все прошло успешно! Мы по цепочке с помощью обработчика then обрабатываем возвращаемый результат в текстовом формате и выводим его в консоль.

По сути с помощью первого обработчика then мы получаем ответ и анализируем его(проверяем статус, заголовки), приводим тело к желаемому формату.

А второго выводим результат (ответ от сервера).

Немного запутано не правда ли? Но если присмотреться и немного поразбираться, то здесь ничего сложного нет!

C XMLHttpRequest это выглядело бы так:

var  req = new XMLHttpRequest();
    req.open("GET", "/js/entry.json", false);
    req.send(null);
    if (req.status === 200) {
      console.log( req.responseText);
    }
    else{
        console.log('Подключения к сети нет ');
    }

Что касается текстового формата к которому мы привели содержимое файла entry.json. Это мягко говоря не очень разумный подход.

Здесь будет уместен формат json поэтому функцию text() мы смело можем заменять на json().

response.json();

В результате нам в консоль будет выводится уже не строка, а объект.

В fecth поддерживаются следующие функции для приведения возвращаемых данных к определенному типу: text(), json(), blob(),arrayBuffer(), formData()

Скажу только что функция blob() возвращает объект с информацией о возвращаемых данных и ответе от сервера.

Теперь рассмотрим параметры которые вы можете передавать в качестве второго аргумента метода fetch.

method - GET, POST, PUT, DELETE, HEAD (по умолчанию используется GET)

headers - (Content-Type: text/html; charset=utf-8) заголовки запроса передаются в виде объекта

referrer - адрес с которого осуществляется запрос

mode - указывает режим запроса кросс-доменности (same-origin, no-cors, cors)

credentials - пересылка кук вместе с запросом (omit, same-origin, include)

cache- кеширование запроса(default, no-store, reload, no-cache, force-cache, only-if-cached)

redirect - редирект (follow, error)

Давайте авторизуемся используя полученные знания:

fetch('/function/index.php', {
        method: 'post',
        body: JSON.stringify(
            {
                login:'andrey',
                password:'dh7dhhd27dh',
                cache:'7fc4y7fby4c378cfy4bc4g8y4f'
            }
            ),
        headers: new Headers({
				'Content-Type': 'application/x-www-form-urlencoded'
			}),
        credentials:'include',
        referrer:'http://site1.com/login'
			}).then(function(response){
				return response.blob();
			}).then(function(res){
				console.log(res);
});

Как видите, здесь мы через api fetch выполнили post запрос на обработчик.

При формировании запроса мы указали определенные параметры:

- метод отправки post

- post параметры

- заголовок отправки формы через ajax

- возвращение сохраненных кук или сессий (credentials:'include') при успешной авторизации

- адрес с которого был выполнен запрос

Заметьте что для формирования заголовков мы воспользовались объектом Headers, это было сделано для удобства.

В результате данных действий мы успешно авторизовались используя fetch api. Я уверен вы оценили удобство использования данной технологии.

А на этом данная статья подошла к концу. Я желаю вам успехов и удачи! Пока!