Понимание Fetch API

1656659889 ponimanie fetch api

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

С момента выпуска IE5 в 1998 году мы имели возможность совершать асинхронные сетевые вызовы в браузере с помощью XMLHttpRequest (XHR).

Через несколько лет Gmail и другие многофункциональные программы активно использовали его и сделали этот подход настолько популярным, что он назывался: AJAX.

Работать непосредственно с XMLHttpRequest всегда было трудно, и он почти всегда отвлекался какой-то библиотекой. В частности, jQuery имеет собственные вспомогательные функции, построенные вокруг него:

  • jQuery.ajax()
  • jQuery.get()
  • jQuery.post()

и так дальше.

Они оказали огромное влияние на то, чтобы сделать асинхронные вызовы более доступными. В частности, они сосредоточились на более старых браузерах, чтобы убедиться, что все еще работает.

The API Fetch стандартизирован как современный подход к асинхронным сетевым запросам и использованию Обещания как строительный блок

Fetch на момент написания (сентябрь 2017 г.) имеет хорошую поддержку в основных браузерах, кроме IE.

ZTZudnYkwsXj7jUrXoEcNRjAyqKBjqoLalmx

Полифил, выпущенный GitHub, позволяет нам использовать fetch в любом браузере.

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

Начало использования Fetch для GET запросы очень просты:

fetch('/file.json')

Вы уже используете его: fetch собирается сделать HTTP-запрос, чтобы получить file.json ресурс на том же домене

Как видите, fetch функция доступна в глобальном window область применения.

Теперь давайте сделаем это полезнее, давайте фактически посмотрим, что такое содержимое файла:

fetch('./file.json') .then(response => response.json()).then(data => console.log(data))

Звонок fetch() возвращает обещание. Мы можем дождаться решения обещания, передав обработчик с then() метод обещания.

Этот обработчик получает возвратное значение fetch promise, объект Response.

Более подробно мы рассмотрим этот объект в следующей главе.

Выявление ошибок

Поскольку fetch() возвращает обещание, мы можем использовать catch метод обещания перехватить любую ошибку, возникающую при выполнении запроса, и обработка выполняется в then обратные вызовы:

fetch('./file.json').then(response => {  //...}.catch(err => console.error(err))

Объект ответа

Объект ответа, возвращенный a fetch() call содержит всю информацию о запросе и ответе на сетевой запрос.

Доступ к headers собственность на в response дает вам возможность просматривать заголовки HTTP, которые возвращает запрос:

fetch('./file.json').then(response => {  console.log(response.headers.get('Content-Type'))  console.log(response.headers.get('Date'))})
OJOg4dW3f2GWea2bcfnwa4MvECpCZ7WbwHxo

статус

Это свойство представляет собой целое число, представляющее статус ответа HTTP.

  • 101, 204, 205или 304 это null body статус
  • 200 к 299включительно, есть ан OK статус (успех)
  • 301, 302, 303, 307или 308 это redirect
fetch('./file.json') .then((response) => {   console.log(response.status) })

statusText

statusText свойство, представляющее сообщение о статусе ответа. Если запрос выполнен успешно, статус есть OK.

fetch('./file.json') .then(response => console.log(response.statusText))

url

url представляет полный URL-адрес свойства, который мы получили.

fetch('./file.json') .then(response => console.log(response.url))

Содержимое тела

Ответ имеет тело, доступное с помощью text() или json() методы, возвращающие обещание.

fetch('./file.json').then(response => response.text()).then(body => console.log(body))
fetch('./file.json').then(response => response.json()).then(body => console.log(body))
bUd5fnaOF3fWarIFA7kr5j2cU-Y9LLvnE35F

То же можно записать с помощью асинхронных функций ES2017:

(async () => {  const response = await fetch('./file.json')  const data = await response.json()  console.log(data)})()

Объект запроса

Объект Request представляет запрос на ресурс и обычно создается с помощью new Request() API.

пример:

const req = new Request('/api/todos')

Объект Request предлагает несколько свойств только для чтения, чтобы проверить детали запроса ресурса, в частности

  • method: метод запроса (GET, POST и т.п.)
  • url: URL запроса.
  • headers: ассоциированный объект Headers запроса
  • referrer: реферер запроса
  • cache: режим кэша запроса (например, по умолчанию, перезагрузка, без кэша).

И обнаруживает несколько методов в том числе json(), text() и formData() обработать тело запроса.

Полный API можно найти здесь.

Необходимо иметь возможность установить заголовок HTTP-запроса fetch дает нам возможность сделать это с помощью объекта Headers:

const headers = new Headers()headers.append('Content-Type', 'application/json')

или, проще:

const headers = new Headers({   'Content-Type': 'application/json' })

Чтобы подключить заголовки к запросу, мы используем объект Request и передаем его. fetch() вместо простой передачи URL-адреса.

Вместо:

fetch('./file.json')

мы делаем

const request = new Request('./file.json', {   headers: new Headers({ 'Content-Type': 'application/json' }) }) 
fetch(request)

Объект Headers не ограничивается установкой значений, но мы также можем спрашивать его:

headers.has('Content-Type') headers.get('Content-Type')

и мы можем удалить заголовок, установленный ранее:

headers.delete('X-My-Custom-Header')

POST запросы

Fetch также позволяет использовать любой другой метод HTTP в вашем запросе: POST, PUT, DELETE или OPTIONS.

Укажите метод в свойстве метода запроса и передайте дополнительные параметры в заголовке и теле запроса:

Пример запроса POST:

const options = {   method: 'post',   headers: {     "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" },     body: 'foo=bar&test=1' } 
fetch(url, options) .catch((err) => {   console.error('Request failed', err) })

Как отменить запрос на выборку

Через несколько лет после fetch было введено, не было возможности отменить запрос после открытия.

Теперь мы можем, благодаря введению AbortController и AbortSignalобщий API для оповещения прервать события

Вы интегрируете этот API, передавая сигнал в качестве параметра выборки:

const controller = new AbortController()const signal = controller.signalfetch(‘./file.json’, { signal })

Вы можете установить тайм-аут, запускающий событие прерывания через 5 секунд после начала запроса на получение, чтобы отменить его:

setTimeout(() => controller.abort(), 5 * 1000)

Удобно, если апорт уже вернулся, звонит abort() не приведет ни к одной ошибке.

Когда возникает сигнал отмены, fetch отклоняет обещание с помощью a DOMException назван AbortError:

fetch('./file.json', { signal }).then(response => response.text()).then(text => console.log(text)).catch(err => {  if (err.name === 'AbortError') {    console.error('Fetch aborted')  } else {    console.error('Another error', err)  }})

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *