
Содержание статьи
Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com
С момента выпуска IE5 в 1998 году мы имели возможность совершать асинхронные сетевые вызовы в браузере с помощью XMLHttpRequest (XHR).
Через несколько лет Gmail и другие многофункциональные программы активно использовали его и сделали этот подход настолько популярным, что он назывался: AJAX.
Работать непосредственно с XMLHttpRequest всегда было трудно, и он почти всегда отвлекался какой-то библиотекой. В частности, jQuery имеет собственные вспомогательные функции, построенные вокруг него:
jQuery.ajax()
jQuery.get()
jQuery.post()
и так дальше.
Они оказали огромное влияние на то, чтобы сделать асинхронные вызовы более доступными. В частности, они сосредоточились на более старых браузерах, чтобы убедиться, что все еще работает.
The API Fetch стандартизирован как современный подход к асинхронным сетевым запросам и использованию Обещания как строительный блок
Fetch на момент написания (сентябрь 2017 г.) имеет хорошую поддержку в основных браузерах, кроме IE.

Полифил, выпущенный 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'))})

статус
Это свойство представляет собой целое число, представляющее статус ответа 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))

То же можно записать с помощью асинхронных функций 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