Что такое fetch

Fetch API - это интерфейс JavaScript для работы с запросами и ответами HTTP. Если ранее подобный функционал можно было достигнуть, использую XMLHttpRequest, то сейчас Fetch API использует promises. Т.е., используя метод fetch, мы можем рендерить нужную нам информацию на фронтенде.

Функция fetch принимает два параметра:

• url — адрес, по которому нужно сделать запрос

• options (необязательный) — объект конфигурации, в котором можно настроить метод запроса, тело запроса, заголовки и многое другое

По умолчанию вызов fetch делает GET-запрос по указанному адресу. Базовый вызов для получения данных можно записать таким образом:

fetch("http://jsonplaceholder.typicode.com/posts")

Результатом вызова fetch будет Promise, в котором будет содержаться специальный объект ответа Response.

Promise простыми словами

Представим обычную ситуацию между двумя людьми. Например, жена готовит оливье на Новый год и не хватает ингредиентов. Отправляет мужа Promise  в магазин.

Жена: Promise, сходи, пожалуйста, в магазин и принеси мне горошек (itemA) для оливье!

Promise: Да, конечно! Без проблем!

Жена: Пока ты ходишь в магазин, я подготовлю другие ингредиенты itemB (асинхронная операция). Только скажи, нашел ли ты горошек itemA (возвращаемое промисом значение).

Promise: А если ты будешь у соседки и тебя не будет дома, когда я вернусь?

Жена: Тогда напиши мне, что ты вернулся и принес горошек (itemA) (успешный callback). Если ты не найдешь, позвони мне немедленно (неуспешный callback).

Promise: Хорошо, договорились!

Если просто, то promise – это данные, которые возвращает асинхронная функция. Данная функция имеет два статуса: resolve, если функция была успешная, и reject, если функция вернула ошибку, т.е. promise вернулся с магазина с пустыми руками. Грустная ситуация для жены, но не для нас.  

 Что давайте рассмотрим пример, когда нам нужно рендерить данные через fetch

Для работы необходима последняя версия Node, установленная на вашем компьютере.

Есть следующая разметка.

<div class="container">
  <div class="goods">
    <div class="goods__item"></div>
  </div>
</div>

 1. Для начала создадим функцию. В качестве примера работы fetch будем использовать JSONPlaceholder. Это бесплатный фейковый API для тестирования и прототипирования.

В моем примере в рамках наглядности я буду использовать три модуля. В первом буду получать данные от сервера и сразу же обрабатывать их в формат json для последующей работы.

const getData = () => {
    return fetch('https://jsonplaceholder.typicode.com/photos')
     .then((response) => {
        return response.json()
     })
    } 
   
   export default getData

2. Здесь уже будем запускать функцию, которая будет обрабатывать ответ от сервера. Это будет модуль launchRender.js. Полученные данные мы уже сможем использовать для рендера товаров. Т.е. сначала получаем данные от сервера и переводим в json, а далее уже обрабатываем их для вывода пользователю.

import getData from './getData'
import renderGoods from './renderGoods'

const launchRender = () => {
	getData().then((data) => {
  	renderGoods(data)
  })
}

export default launchRender

3. Функция для рендера товаров. Здесь находим контейнер для товаров, далее перебирая массив данных через цикл, будем добавлять верстку карточки.

const renderGoods = (goods) => {
  const goodsWrapper = document.querySelector('.goods')
  
  goods.forEach((goodsItem) => {
  	goodsWrapper.insertAdjacentHTML('beforeend', `
    		<img class='goods__img' src="${goodsItem.url}">
        <h3 class="goods__title">${goodsItem.title}</h3>
    `)
  })
}

export default renderGoods

Таким образом можно получать данные от сервера и обрабатывать их. В Fetch API встроена поддержка самых разных типов данных. Поскольку результат запроса возвращается в объекте Response, то вы можете использовать его методы для автоматической конвертации получаемых данных в нужный тип. На сегодня имеются методы:

• Response.text()

• Response.json()

• Response.formData()

• Response.arrayBuffer()

• Response.blob()

Fetch API предоставляет упрощенный и в тоже время гибкий и мощный инструмент для обращения к сетевым ресурсам .