Введение
Было время, когда для запросов API использовался XMLHttpRequest
. В нем не было промисов, и он не позволял создавать чистый код JavaScript. В jQuery мы использовали более чистый синтаксис с jQuery.ajax()
.
Сейчас JavaScript имеется собственный встроенный способ отправки запросов API. Это Fetch API, новый стандарт создания серверных запросов с промисами, также включающий много других возможностей.
В этом учебном модуле мы создадим запросы GET и POST, используя Fetch API.
Предварительные требования
Для этого обучающего модуля вам потребуется следующее:
Шаг 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, ознакомьтесь с этой статьей по данной теме.