Будьте в курсе последних событий, подпишитесь на обновления сайта

Метод fetch как замена XMLHttpRequest

Метод fetch как замена XMLHttpRequest

Здравствуйте!  Сегодня хочу рассказать о методе fetch, который используется как  замена уже  рассмотренному методу XMLHttpRequest.  Метод fetch – это своего рода XMLHttpRequest нового поколения. Он предоставляет усовершенствованный  интерфейс для осуществления запросов к серверу: как по части контроля над происходящим, так и по синтаксису, так как построен на промисах.

Поддержка в браузерах  уже поддерживают все браузеры, кроме IE.

Метод fetch как замена XMLHttpRequest

Синтаксис  fetch

Синтаксис метода  следующий fetch:

let promise = fetch(url[, options]);
  • url – URL,  собственно адрес на который сделать запрос,
  • options – необязательный параметр  с настройками запроса.

Свойства options:

  • method – метод запроса POST или GET,
  • headers – заголовки запроса,
  • body – тело запроса:  данные
  • 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» для обычного поведения при коде 30x (следовать редиректу) или «error» для интерпретации редиректа как ошибки.

Как видно, всевозможных настроек здесь больше, чем в XMLHttpRequest.

Использование

При вызове fetch возвращает промис, который, когда получен ответ, выполняет коллбэки с объектом Response или с ошибкой, если запрос не удался.

Пример использования:

'use strict'; 
fetch('/article/fetch/user.json').then(function(response) { 
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8 
alert(response.status); // 200 
return response.json(); }) 
.then(function(user) { 
alert(user.name); // akuchay }) 
.catch( alert);

Объект response кроме доступа к заголовкам headers, статусу status и некоторым другим полям ответа, даёт  также возможность прочитать его тело, в желаемом формате.

Читайте также  Server Side Events - события на стороне сервера

Варианты описаны в спецификации Body и они включают в себя:

  • response.arrayBuffer()
  • response.blob()
  • response.formData()
  • response.json()
  • response.text()

Соответствующий вызов возвращает промис, который, когда ответ будет получен, вызовет  функцию обратного вызова с результатом.

В примере выше мы можем в первом вызове  .then проанализировать ответ и, если все нормально – вернуть промис с нужным форматом. Следующий .then уже будет содержать полный ответ сервера.

Итого

Метод fetch – уже сейчас  очень удобная альтернатива XMLHttpRequest для тех, кто  любит промисы.

Более детальное описание этого метода есть в стандарте Fetch.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: