cpp

Fetch API

Современные Web-браузеры позволяют выполнять AJAX-запросы не только с помощью объекта XMLHttpRequest, но и с помощью Fetch API. Проверить возможность использования Fetch API можно следующим образом:

if (window.fetch) {
    console.log('Fetch API поддерживается');
}
else {
    console.log('Ваш браузер не поддерживает Fetch API');
   // Здесь можно попробовать отправить данные с помощью XMLHttpRequest
}

Функция fetch()

Для выполнения AJAX-запроса предназначена функция fetch(). Формат функции:

Promise<Response> = fetch(input[, init])

В первом параметре указывается URL-адрес (в виде строки или объекта URL) или объект запроса Request. Во втором параметре можно передать объект с настройками (см. разд. 3.2.5). Функция возвращает объект Promise содержащий в себе объект ответа Response. Отправка запроса выполняется асинхронно, по умолчанию методом GET, сразу после вызова функции fetch(). Обработать получение данных позволяют следующие основные методы объекта Promise:

  • then(<Функция1>[, <Функция2>]) — вызывает функцию, ссылка на которую указана в качестве первого параметра, когда объект готов к обработке (т. е. после выполнения асинхронного запроса и получения результата). При первом вызове внутри функции через параметр доступен объект ответа Response. Метод возвращает объект Promise, содержащий результат, возвращаемый функцией. Этот результат доступен через параметр функции, при вызове следующего метода then();
  • catch(<Функция>) — вызывает функцию, ссылка на которую указана в качестве параметра, при возникновении исключения. Внутри функции через параметр доступен объект с описанием исключения. Метод возвращает объект Promise.

В качестве примера переделаем код функции sendReqGET() из листинга 3.12 и после нажатия кнопки отправим запрос методом GET, используя Fetch API (листинг 3.13). Функция будет получать данные в формате JSON, которые отправляются файлом ajax.php (листинг 3.11).

Листинг 3.13. Получение данных в формате JSON с помощью Fetch API

function sendReqGET() {
   if ( !window.fetch ) {
      window.alert('Ваш браузер не поддерживает Fetch API');
      return;
   }
   var txt1 = document.getElementById('txt1').value;
   var txt2 = document.getElementById('txt2').value;
   if (txt1 === '' || txt2 === '') {
      window.alert('Не заполнено поле');
      return;
   }
   var url = '/ajax.php?txt1=' + encodeURIComponent(txt1);
   url += '&txt2=' + encodeURIComponent(txt2);
   document.getElementById('div_ajax').innerHTML = 'Загрузка...';
   fetch(url)
      .then( function(response) {
         if ( !response.ok ) {
            throw new Error('Статус: ' + response.status);
         }
         return response.json();
      })
      .then( function(json) {
         var msg = json.txt1 + '<br>' + json.txt2;
         document.getElementById('txt1').value = '';
         document.getElementById('txt2').value = '';
         document.getElementById('div_ajax').innerHTML = msg;
      })
      .catch( function(e) {
         document.getElementById('div_ajax').innerHTML = 'Ошибка: ' + e;
      })
      .then( function() {
         console.log('Функция выполнится в любом случае');
      });
}

Благодаря тому, что функция fetch() и методы then() и catch() возвращают объект Promise мы можем строить цепочки из вызовов. В функции обратного вызова, зарегистрированной первым методом then(), через параметр доступен объект ответа Response. Функция будет вызвана не сразу, а только после получения ответа сервера. При этом запрос выполняется асинхронно, не блокируя выполнение всей программы. Вызов функции производится при любом HTTP-коде ответа сервера, поэтому мы проверяем код с помощью свойства ok объекта Response. Свойство ok содержит значение true, если HTTP-код находится в пределах от 200 до 299. Если это не так, то генерируем исключение Error, указывая полученный код в описании исключения. Получить этот код позволяет свойство status. Исключение будет перехвачено и доступно внутри функции, зарегистрированной с помощью метода catch().

Для преобразования строки в формате JSON, возвращенной сервером, в JSON-объект, предназначен метод json() объекта Response. Значение, возвращаемое методом json(), мы возвращаем из функции. Это значение будет доступно внутри функции обратного вызова, зарегистрированной вторым методом then(), через параметр. Если вызов метода json() окончился неудачно, то генерируется исключение. Исключение будет перехвачено и доступно внутри функции, зарегистрированной с помощью метода catch(). Объект исключения доступен внутри функции обратного вызова через параметр.

Функция обратного вызова, зарегистрированная последним методом then(), будет вызвана в любом случае, вне зависимости от возникновения исключения, после окончания обработки результата запроса. Это аналог метода finally().

Web-браузеры, поддерживающие Fetch API, чаще всего имеют поддержку ключевых слов let и const, а также стрелочных функций, которые удобно использовать вместо анонимных функций:

let url = '/ajax.php?txt1=' + encodeURIComponent(txt1);
url += '&txt2=' + encodeURIComponent(txt2);
document.getElementById('div_ajax').innerHTML = 'Загрузка...';
fetch(url)
   .then( response => {
      if ( !response.ok ) {
         throw new Error('Статус: ' + response.status);
      }
      return response.json();
   })
   .then( json => {
      const msg = json.txt1 + '<br>' + json.txt2;
      document.getElementById('txt1').value = '';
      document.getElementById('txt2').value = '';
      document.getElementById('div_ajax').innerHTML = msg;
   })
   .catch( e => {
      document.getElementById('div_ajax').innerHTML = 'Ошибка: ' + e;
   })
   .then( () => console.log('Функция выполнится в любом случае') );

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp