Fetch | Как получить данные? Используем JavaScript

В этой публикации мы постараемся разобраться в том, как дотянуться до заветных данных при помощи JavaScript и метода fetch(input, init)

Мы по шагам будем погружаться в выборку и смотреть полученные итерации на каждом шаге, чтобы не запутаться и не пропустить важное.

Задача

Нужно получить простую HTML-разметку из файла text.html. Нужно поместить разметку в текущий документ, открытый в браузере пользователя. Получаемая разметка такая:

<h1>Заголовок публикации</h1>
<p>Текст под заголовком</p>

Документ пользователя содержит только один заголовок на странице:

<h1>Fetch | Шаг 1</h1>

Шаг 1 — Смотрим, что возвращает метод fetch() с одним аргументом

var a = fetch("text.html")

В нашей простой задаче мы передаём в качестве аргумента строку, которая указывает на местоположение документа на сервере.

Объект Promise
Объект Promise

Результатом выполнения выборки Fetch является обещание Promise.

Шаг 2 — Достаём из обещания ответ

Теперь мы можем работать с обещанием и создавать цепочку последовательных операций. Давайте поглядим о каком [[PromiseResult]] идёт речь. В метод then() я передам созвучное название «promiseResult«.

var a = fetch("text.html")
   .then(promiseResult => {console.log(promiseResult)})

Стрелочной функцией мы выводим в консоль успешный результат обещания. На этот раз мы получаем объект Response.

Объект Response из объекта Promise
Объект Response из объекта Promise

У этого объекта есть свои интересные свойства. Но мы идём дальше т. к. пока того, что нам нужно, не видно.

 

Шаг 3 — Достаём из ответа данные

Отобразим содержимое объекта Response в консоли браузера, как и делали ранее. Воспользуемся методом ответов Response, который именуется text()

var a = fetch("text.html")
   .then(promiseResult => {
      console.log(promiseResult)
      return promiseResult.text()
   })
   .then(responseResult => {console.log(responseResult)})
Прочитали содержимое объекта Response
Прочитали содержимое объекта Response

Мы получили содержимое файла text.html и вывели его в консоль браузера.

 

Шаг 4 — Публикация содержимого из файла на страницу

Теперь логичнее всего завершить начатое — это опубликовать ответ на страницу. Воспользуемся простой конструкцией «document.write(responseResult)«:

var a = fetch("text.html")
   .then(promiseResult => {
      console.log(promiseResult)
      return promiseResult.text()
   })
   .then(responseResult => {
      console.log(responseResult)
      document.write(responseResult)
   })
Итоговая HTML-разметка
Итоговая HTML-разметка

Готово.

 

Итог. Что мы делали?

Fetch возвращает объект Promise, из Promise получаем объект Response, а из Response достаём нужное нам содержимое файла — выбираем нужный метод.

 

Ссылки для информации

Перевод стандарта Fetch — https://efim360.ru/fetch/

Оригинальная версия стандарта Fetch — https://fetch.spec.whatwg.org/

 

Поделись записью