URL: https://www.progressiverobot.com/how-to-use-the-javascript-fetch-api-to-get-data-ru/

Введение

Было время, когда для запросов 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:

				
					
&lt;h1&gt;Authors&lt;/h1&gt;

&lt;ul id="authors"&gt;&lt;/ul&gt;

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

				
					
&lt;script&gt;



	const ul = document.getElementById('authors');

	

&lt;/script&gt;

Создайте постоянную переменную 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) =&gt; )

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

				
					
fetch(url)

.then((resp) =&gt; 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) =&gt; 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, ознакомьтесь с этой статьей по данной теме.

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

Table of Contents

Введение

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

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

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

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

Заключение

Links

Newsletter

Contact