Содержание статьи
Хотите изучить 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