Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

Fetch HTML

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. Я уверен вы оценили удобство использования данной технологии.

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

Оцените статью

Еще статьи

scroll js

Область видимости php

Ссылки html

GIT для начинающих

Откат GIT

column css

Генерация строк php

Диалоговые окна tkinter

out of range

Комментарии

abbakAnacy

test

20:06 05-07-2019

DavidTreab

Избавит от грибка всего за 20 дней и не допустит повторного заражения, благодаря комплексу из натуральных масел и лекарственных растений. Наш сайт: https://ljvgzmqd.morningeverning.com

22:44 06-06-2019

DavidTreab

Избавляет вас от хронического простатита и восстанавливает потенцию Наш сайт: https://lmzdvpjm.morningeverning.com

15:09 03-06-2019

DavidTreab

Избавит от грибка всего за 20 дней и не допустит повторного заражения, благодаря комплексу из натуральных масел и лекарственных растений. Наш сайт: https://ljvgzmqd.morningeverning.com

14:55 03-06-2019

История

    НОВОСТИ

    • Опубликовал приложение под android 'Аудиокниги'. Кому интересно, переходите по ссылке