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/).

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

const fetchPromise = fetch("https://ghibliapi.herokuapp.com/films");
fetchPromise.then(response => {
  console.log(response);
});

const fetchPromise = fetch("https://ghibliapi.herokuapp.com/films");

fetchPromise.then(response => {

console.log(response);

});

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

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

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

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

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

const fetchPromise = fetch("https://ghibliapi.herokuapp.com/films");
fetchPromise.then(response => {
  return response.json();
}).then(films => {
   console.log(films);
});

const fetchPromise = fetch("https://ghibliapi.herokuapp.com/films");

fetchPromise.then(response => {

return response.json();

}).then(films => {

console.log(films);

});

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

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

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

<div id="films">
  <div class="container">
     <h2 class="text-center mt-4">Heroku Films</h2>
     <div class="row">
     </div>	
  </div>
</div>
<script>
const fetchPromise = fetch("https://ghibliapi.herokuapp.com/films");
let mainContent = '',
   main = document.querySelector('#films .row');

fetchPromise.then(response => {
   return response.json();
}).then(films => {
films.forEach(film => {
  mainContent+=`
  <div class="col-md-6 film-heroku my-3">
    <div class="card border-primary">
  	<div class="card-header bg-primary text-light">
  	  <div class="card-title">
  	    <h2>${film.title}</h2>
  	    <h4>Director: ${film.director}</h4>
  	    <h4>Producer: ${film.producer}</h4>
  	    <h4>Release Date: ${film.release_date}</h4>
  	  </div>
  	</div>
  	<div class="card-body" data-id="${film.id}">
  	  <div class="card-text">${film.description}</div>
     </div>
    </div>
  </div>`;
  });
  console.log(films);
  main.innerHTML = mainContent;
});
</script>

<h2 class="text-center mt-4">Heroku Films</h2>

</div>

const fetchPromise = fetch("https://ghibliapi.herokuapp.com/films");

let mainContent = '',

main = document.querySelector('#films .row');

fetchPromise.then(response => {

return response.json();

}).then(films => {

films.forEach(film => {

mainContent+=`

<h2>${film.title}</h2>

<h4>Director: ${film.director}</h4>

<h4>Producer: ${film.producer}</h4>

<h4>Release Date: ${film.release_date}</h4>

</div>

<div class="card-text">${film.description}</div>

</div>

</div>`;

});

console.log(films);

main.innerHTML = mainContent;

});

</script>

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

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

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