Использование JavaScript Fetch API для получения данных

Введение

Было время, когда для запросов API использовался XMLHttpRequest. В нем не было промисов, и он не позволял создавать чистый код JavaScript. В jQuery мы использовали более чистый синтаксис с jQuery.ajax().

Сейчас JavaScript имеется собственный встроенный способ отправки запросов API. Это Fetch API, новый стандарт создания серверных запросов с промисами, также включающий много других возможностей.

В этом учебном модуле мы создадим запросы GET и POST, используя Fetch API.

Предварительные требования

Для этого обучающего модуля вам потребуется следующее:

  • Последняя версия Node, установленная на вашем компьютере. Чтобы установить Node в macOS, выполните указания учебного модуля Установка Node.js и создание локальной среды разработки в macOS.
  • Базовое понимание принципов программирования в JavaScript, о которых можно узнать более подробно в серии Программирование на JavaScript.
  • Понимание понятия промисов в JavaScript. Прочитайте раздел «Промисы» этой статьи, чтобы узнать больше о циклах событий, обратных вызовах, промисах и асинхронном/ожидающем в JavaScript.

Шаг 1 — Введение в синтаксис Fetch API

Чтобы использовать Fetch API, вызовите метод fetch, который принимает URL API в качестве параметра:

fetch(url) 

После метода fetch() нужно включить метод промиса then():

.then(function() {  }) 

Метод fetch() возвращает промис. Если возвращается промис resolve, будет выполнена функция метода then(). Эта функция содержит код для обработки данных, получаемых от API.

Под методом then() следует включить метод catch():

.catch(function() {  }); 

API, вызываемый с помощью метода fetch(), может не работать или на нем могут возникнуть ошибки. Если это произойдет, будет возвращен промис reject. Метод catch используется для обработки reject. Код метода catch() выполняется в случае возникновения ошибки при вызове выбранного API.

В целом, использование Fetch API выглядит следующим образом:

fetch(url) .then(function() {  }) .catch(function() {  }); 

Теперь мы понимаем синтаксис использования Fetch API и можем переходить к использованию fetch() с реальным API.

Шаг 2 — Использование Fetch для получения данных от API

Следующие примеры кода основаны на Random User API. Используя API, вы получаете десять пользователей и выводите их на странице, используя Vanilla JavaScript.

Идея заключается в том, чтобы получить все данные от Random User API и вывести их в элементах списка внутри списка автора. Для начала следует создать файл HTML и добавить в него заголовок и неупорядоченный список с идентификатором authors:

<h1>Authors</h1> <ul id="authors"></ul> 

Теперь добавьте теги script в конец файла HTML и используйте селектор DOM для получения ul. Используйте getElementById с аргументом authors. Помните, что authors — это идентификатор ранее созданного ul:

<script>      const ul = document.getElementById('authors');  </script> 

Создайте постоянную переменную url, в которой будет храниться URL-адрес API, который вернет десять случайных пользователей:

const url = 'https://randomuser.me/api/?results=10'; 

Теперь у нас есть ul и url, и мы можем создать функции, которые будут использоваться для создания элементов списка. Создайте функцию под названием createNode, принимающую параметр с именем element:

function createNode(element) {  } 

Впоследствии, при вызове createNode, вам нужно будет передать имя создаваемого элемента HTML.

Добавьте в функцию выражение return, возвращающее element, с помощью document.createElement():

function createNode(element) {     return document.createElement(element); } 

Также вам нужно будет создать функцию с именем append, которая принимает два параметра: parent и el:

function append(parent, el) {  } 

Эта функция будет добавлять el к parent, используя document.createElement:

function append(parent, el) {     return parent.appendChild(el); } 

Теперь и createNode, и append готовы к использованию. Используя Fetch API, вызовите Random User API, добавив к fetch() аргумент url:

fetch(url) 
fetch(url)   .then(function(data) {      })   })   .catch(function(error) {    }); 

В вышеуказанном коде вы вызываете Fetch API и передаете URL в Random User API. После этого поступает ответ. Однако ответ вы получите не в формате JSON, а в виде объекта с серией методов, которые можно использовать в зависимости от того, что вы хотите делать с информацией. Чтобы конвертировать возвращаемый объект в формат JSON, используйте метод json().

Добавьте метод then(), содержащий функцию с параметром resp:

fetch(url) .then((resp) => ) 

Параметр resp принимает значение объекта, возвращаемого fetch(url). Используйте метод json(), чтобы конвертировать resp в данные JSON:

fetch(url) .then((resp) => resp.json()) 

При этом данные JSON все равно необходимо обработать. Добавьте еще одно выражение then() с функцией, имеющей аргумент с именем data:

.then(function(data) {      }) }) 

Создайте в этой функции переменную с именем authors, принимающую значение data.results:

.then(function(data) {     let authors = data.results; 

Для каждого автора в переменной authors нам нужно создать элемент списка, выводящий портрет и имя автора. Для этого отлично подходит метод map():

let authors = data.results; return authors.map(function(author) {  }) 

Создайте в функции map переменную li, которая будет равна createNode с li (элемент HTML) в качестве аргумента:

return authors.map(function(author) {     let li = createNode('li'); }) 

Повторите эту процедуру, чтобы создать элемент span и элемент img:

let li = createNode('li'); let img = createNode('img'); let span = createNode('span'); 

Предлагает имя автора и портрет, идущий вместе с именем. Установите в img.src портрет автора:

let img = createNode('img'); let span = createNode('span');  img.src = author.picture.medium; 

Элемент span должен содержать имя и фамилию автора. Для этого можно использовать свойство innerHTML и интерполяцию строк:

img.src = author.picture.medium; span.innerHTML = `${author.name.first} ${author.name.last}`; 

Когда изображение и элемент списка созданы вместе с элементом span, вы можете использовать функцию append, которую мы ранее добавили для отображения этих элементов на странице:

append(li, img); append(li, span); append(ul, li); 

Выполнив обе функции then(), вы сможете добавить функцию catch(). Эта функция поможет зарегистрировать потенциальную ошибку на консоли:

.catch(function(error) {   console.log(error); }); 

Это полный код запроса, который вы создали:

function createNode(element) {     return document.createElement(element); }  function append(parent, el) {   return parent.appendChild(el); }  const ul = document.getElementById('authors'); const url = 'https://randomuser.me/api/?results=10';  fetch(url) .then((resp) => resp.json()) .then(function(data) {   let authors = data.results;   return authors.map(function(author) {     let li = createNode('li');     let img = createNode('img');     let span = createNode('span');     img.src = author.picture.medium;     span.innerHTML = `${author.name.first} ${author.name.last}`;     append(li, img);     append(li, span);     append(ul, li);   }) }) .catch(function(error) {   console.log(error); }); 

Вы только что успешно выполнили запрос GET, используя Random User API и Fetch API. На следующем шаге вы научитесь выполнять запросы POST.

Шаг 3 — Обработка запросов POST

По умолчанию Fetch использует запросы GET, но вы также можете использовать и все другие типы запросов, изменять заголовки и отправлять данные. Для этого нужно задать объект и передать его как второй аргумент функции fetch.

Прежде чем создать запрос POST, создайте данные, которые вы хотите отправить в API. Это будет объект с именем data с ключом name и значением Sammy (или вашим именем):

const url = 'https://randomuser.me/api';  let data = {   name: 'Sammy' } 

Обязательно добавьте постоянную переменную, хранящую ссылку на Random User API.

Поскольку это запрос POST, ее нужно будет указать явно. Создайте объект с именем fetchData:

let fetchData = {  } 

Этот объект должен содержать три ключа: method, body и headers. Ключ method должен иметь значение 'POST'. Для body следует задать значение только что созданного объекта data. Для headers следует задать значение new Headers():

let fetchData = {   method: 'POST',   body: data,   headers: new Headers() } 

Интерфейс Headers является свойством Fetch API, который позволяет выполнять различные действия с заголовками запросов и ответов HTTP. Если вы захотите узнать об этом больше, вы можете найти более подробную информацию в статье под названием Определение маршрутов и методов запросов HTTP в Express.

С этим кодом можно составлять запросы POST, используя Fetch API. Мы добавим url и fetchData как аргументы запроса fetch POST:

fetch(url, fetchData) 

Функция then() будет включать код, обрабатывающий ответ, получаемый от сервера Random User API:

fetch(url, fetchData) .then(function() {     // Handle response you get from the server }); 

Есть и другая опция, позволяющая создать объект и использовать функцию fetch(). Вместо того, чтобы создавать такой объект как fetchData, вы можете использовать конструктор запросов для создания объекта запроса. Для этого нужно создать переменную с именем request:

const url = 'https://randomuser.me/api';  let data = {   name: 'Sara' }  var request = 

Для переменной request следует задать значение new Request. Конструкт new Request принимает два аргумента: URL API (url) и объект. В объекте также должны содержаться ключи method, body и headers, как и в fetchData:

var request = new Request(url, {     method: 'POST',     body: data,     headers: new Headers() }); 

Теперь request можно использовать как единственный аргумент для fetch(), поскольку он также включает URL-адрес API:

fetch(request) .then(function() {     // Handle response we get from the API }) 

В целом код будет выглядеть следующим образом:

const url = 'https://randomuser.me/api';  let data = {   name: 'Sara' }  var request = new Request(url, {     method: 'POST',     body: data,     headers: new Headers() });  fetch(request) .then(function() {     // Handle response we get from the API }) 

Теперь вы знаете два метода создания и выполнения запросов POST с помощью Fetch API.

Заключение

Хотя Fetch API поддерживается еще не всеми браузерами, он представляет собой отличную альтернативу XMLHttpRequest. Если вы хотите узнать, как вызывать Web API с помощью React, ознакомьтесь с этой статьей по данной теме.