Было время, когда для запросов API использовался XMLHttpRequest
. В нем не было промисов, и он не позволял создавать чистый код JavaScript. В jQuery мы использовали более чистый синтаксис с jQuery.ajax()
.
Сейчас JavaScript имеется собственный встроенный способ отправки запросов API. Это Fetch API, новый стандарт создания серверных запросов с промисами, также включающий много других возможностей.
В этом учебном модуле мы создадим запросы GET и POST, используя 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.
Следующие примеры кода основаны на 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.
По умолчанию 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, ознакомьтесь с этой статьей по данной теме.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.