Вы здесь: Главная » JavaScript » ES6 » HTTP запросы с помощью Fetch API и промисов

HTTP запросы с помощью Fetch API и промисов

До недавнего времени отправить или получить данные с сервера можно было с помощью форм с перезагрузкой страницы или с помощью AJAX без перезагрузки. Стандарт ES6 (EcmaScript2015) добавил технологию Fetch API, которая основана на промисах (Promises). Рассмотрим простой вариант получения данных с помощью Fetch API.

Что такое Fetch API?

В переводе с английского "fetch" - это получать, доставать, приносить. Т.е. Fetch API - это простой интерфейс для получения данных с ресурсов. Fetch позволяет нам сделать сетевой запрос и обрабатывать ответы проще, чем наш старый друг XMLHttpRequest (XHR). Одно из основных отличий заключается в том, что Fetch API использует промисы (Promises), что обеспечивает способ избежать большого количества обратных вызовов (так называемый callback hell) и типичного тяжелого кода, который предоставляет XMLHttpRequest (XHR).

Функция fetch() принимает один обязательный аргумент - путь к ресурсу, который вы хотите получить, и возвращает Promise, который разрешается в ответе (response) этого запроса.

Теперь мы сталкиваемся с новым вопросом - а что такое промисы (Promises, или обещания)?

Что такое промисы?

Объект Promise представляет возможное завершение (или сбой) асинхронной операции и ее результирующее значение.

Обещания предоставляют нам более простую альтернативу выполнению, составлению и управлению асинхронной операцией по сравнению с традиционным подходом на основе обратных вызовов.

Работая с промисами-обещаниями, мы должны знать, каково его текущее состояние, т.к. у этого объекта есть три состояния: Ожидание (Pending), Выполнено (Fulfilled ) и Отклонено (Rejected).

Когда Обещание находится в состоянии ожидания, оно может перейти в состояние Выполнено или Отклонено. Как только Обещание переходит в состояние Выполнено или Отклонено, оно не может перейти в любое другое состояние и его значение также не изменится (!).

Когда Обещание выполнено, это означает, что асинхронная операция завершена, и Обещание имеет значение. Когда Обещание отклонено, это означает, что асинхронная операция не удалась, и Обещание никогда не будет выполнено.

Использование Fetch API и Promis-ов

Теперь мы будем работать над простым примером, в котором мы будем использовать Fetch API и Промисы, чтобы отобразить список, содержащий данные, загружаемые с удаленного ресурса. В качестве такого ресурса будем использовать общедоступный API с информацией от студии анимации под названием Studio Ghibli (https://ghibliapi.herokuapp.com/).

Запишем такой код:

Когда HTTP-запрос выполняется как асинхронная операция, выборка не возвращает никаких данных. Однако он вернет ответное Обещание. Когда мы регистрируем ответ, он покажет, что это Обещание находится в состоянии ожидания. Это означает, что ответ HTTP, который мы ожидаем, в конце концов вернется, но на момент регистрации этот ответ не был готов к регистрации.

Изначально наше Обещание находится в состоянии ожидания, но через некоторое время оно может перейти в выполненное состояние, если все идет хорошо, или в отклоненное состояние, если при загрузке произошла ошибка. Как только Обещание выполнено, оно больше не может изменять состояние.

Мы регистрируем ответ, чтобы увидеть, какую информацию мы получаем от API с помощью метода Promise.prototype.then(). В консоли браузера мы увидим объект Response (Ответ) с некоторой информацией, которая включает заголовки, текст, тип и даже код состояния.

fetch-responce

Поскольку в объекте Response свойство status имеет значение 200, а  statusText вернуло значение "OK", можно сделать вывод, что наш объект Promise перешел из состояния Pending (ожидание) в состояние Fulfilled (выполнено). Двигаемся дальше и пробуем извлечь данные о фильмах из ответа (response) нашего объекта Promise. Мы опять будем использовать метод промиса then(), чтобы прикрепить обратный вызов, как только наше обещание будет выполнено.

Для того чтобы получить тело ответа в формате JSON, используем метод json() для ответа вместо console.log().  Эта операция также является асинхронной. Имейте ввиду, что метод json()  возвращает еще один Promise, поэтому нам нужно создать цепочку Обещаний с помощью такого кода:

Мы передадим значение, полученное от первого Promise, в нашу цепочку, чтобы вывести информацию о фильмах студии в консоль. На данный момент их 20, и каждый фильм имеет свой id, title и description, а также данные о режиссере (director), продюсере (producer) и дате релиза фильма (release_date), что видно на скриншоте:

fetch-data

Вывод информации на html-страницу

Теперь нам просто нужно сформировать красивый html на основе полученной информации. Используем для форматирования вывода информации  о фильмах компонент Card (Карточка) Bootstrap-4. Для разметки нам понадобится основной <div id="films"> и вложенные в него элементы  <div class="container"> и <div class="row">. Код видоизменится таким образом:

Результат можно посмотреть ниже или в новой вкладке:

Fetch API предоставил нам возможность загрузить данные достаточно быстро и с формированием структуры html-страницы на основе полученных JSON-данных. Этой технологией можно пользоваться в тех браузерах, которые поддерживают новые JS стандарты.

На основе статьи How to make HTTP requests using Fetch API and Promises

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *