Основы Fetch API

Основы Fetch API

Руководство для начинающих

Запрос ресурсов из API - довольно распространенная и почти жизненно важная функция, необходимая для создания современных приложений. Независимо от того, создали ли вы собственный API или используете сторонний API, вам нужен способ делать запросы, не замедляя работу приложения. Именно здесь вступает в игру Fetch API, и это один из самых популярных инструментов для выполнения работы.

Поговорим об Ajax

Прежде чем мы перейдем к Fetch, нам нужно кратко рассказать о том, что он решает с концептуальной точки зрения. Ajax означает асинхронный, JavaScript, XML, и это метод динамического запроса данных и обновления DOM без обновления всей страницы. Запрос, который вы делаете, выполняется в фоновом режиме вашего приложения, и в случае успеха он обновляет вашу страницу, не заставляя пользователя ждать.

API Fetch

Есть несколько способов обработки запросов Ajax, но один из самых популярных - использование Fetch API. В этом API вам предоставляется fetch() метод, который возвращает Promise, позволяющий получить ответ на запрос. В дополнение к этой базовой функциональности вы можете добавить дополнительные сведения о том, что вы хотите делать с данными ответа, и это одна из замечательных частей использования Fetch. Давайте замолчать и приступим к созданию простого запроса на выборку!

Создание запроса

Создать базовый запрос довольно просто. Fetch предоставляет нам метод fetch(), о котором я упоминал ранее, и для него требуется только один аргумент, который является URL-адресом или конечной точкой из желаемого API. В моем примере я собираюсь использовать очень популярный PokeAPI, который является отличным ресурсом для всего, что связано с покемонами!

fetch(`https://pokeapi.co/api/v2/pokemon/pikachu/')

Вот наша основная настройка метода fetch(). Мы вставляем желаемую конечную точку API, и теперь, когда она будет запущена, она выполнит HTTP-запрос GET, или будет? После этого необходимо сделать еще один базовый шаг, чтобы увидеть наш ответ.

fetch(`https://pokeapi.co/api/v2/pokemon/pikachu/')
  .then(response => response.json() )
  .then(pokemon => console.log(pokemon) )

На следующем шаге вы увидите, что мы используем .then, что коррелирует с тем фактом, что выборка основана на использовании обещаний. При отправке нашего запроса мы не хотим, чтобы наш пользовательский интерфейс останавливался и ждал завершения запроса, поэтому мы используем .then, чтобы дождаться ответа сервера, где мы можем затем console.log возвращать данные.

Давайте разберем, что происходит в каждом .then. Когда мы запускаем наш запрос с fetch(), инициируется Promise, и мы должны ждать объекта Response. Это делается с помощью нашего первого .then, который не возвращает данные, а дает нам объект Response.

{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://pokeapi.co/api/v2/pokemon/pikachu/"
}

Здесь мы можем увидеть наш ответ, который представляет собой информацию о сделанном нами запросе. Отсюда у нас есть возможность вызвать .json() метод для нашего ответа, который запустит другое обещание, которое возвращает тело нашего ответа в виде данных json.

Обработка ошибок

Последний кусок головоломки - обработка ошибок, когда запросы идут не так, как надо. Эта функция необходима, когда запрашиваются несуществующие ресурсы или когда ресурс требует авторизации. Для этого мы используем .catch, чтобы «поймать» наши ошибки.

fetch(`https://pokeapi.co/api/v2/pokemon/pikachu/')
  .then(response => response.json() )
  .then(pokemon => console.log(pokemon) )
  .catch( error => console.error('error:', error) );

Заключение

Вы официально создали базовый запрос на получение данных о Пикачу! Как видите, этот инструмент упрощает процесс использования данных api, а также обеспечивает большую гибкость. В своих .then вы можете создавать функции для управления вашими данными до того, как они обновят DOM, или вы можете использовать действия Redux, чтобы поддерживать состояние в приложении React. Еще одна функция, о которой я не упомянул, - это возможность настройки Headers, о которой я мог бы написать целую статью.

Я настоятельно рекомендую глубже изучить Fetch API и обязательно оставлю вам дополнительные ресурсы в конце этой статьи. Если вам нравится использовать API, как и мне, тогда сделайте себе одолжение и изучите Fetch API!

Удачного кодирования!