Использование 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, ознакомьтесь с этой статьей по данной теме.