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

  • 296 просмотров
  • 6 минута чтения
Хади Бахадори
  • 22 января 2025 г.
0 Акции
0
0
0
0
0
Акции
0
0
0
0

Введение

Когда-то XMLHttpRequest использовался для выполнения запросов к API. Он не включал Promises и не генерировал чистый код JavaScript. С jQuery можно использовать более чистый синтаксис jQuery.ajax().

Теперь в JavaScript есть собственный встроенный способ выполнения API-запросов. Это Fetch API, новый стандарт для выполнения серверных запросов с помощью Promises, но он включает в себя дополнительные функции.

В этом руководстве вы создадите запросы GET и POST с использованием API Fetch.

Предпосылки
  • Локальная среда разработки для Node.js.
  • Базовые знания программирования на JavaScript.
  • Понимание обещаний в JavaScript.

Шаг 1 — Начало работы с синтаксисом Fetch API

Один из способов использования API Fetch — передача URL-адреса API fetch() в качестве параметра:

fetch(url)

Метод fetch() возвращает Promise. После метода fetch() вставьте метод Promise then():

fetch(url)
.then(function() {
// handle the response
})

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

После метода then() вставьте метод catch():

fetch(url)
.then(function() {
// handle the response
})
.catch(function() {
// handle the error
});

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

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

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

Следующий пример кода основан на API JSONPlaceholder. Используя этот API, вы получите данные о десяти пользователях и отобразите их на странице с помощью JavaScript. В этом руководстве мы извлечём данные из API JSONPlaceholder и отобразим их в элементах списка авторов.

Начните с создания HTML-файла и добавления заголовка и неупорядоченного списка с идентификаторами авторов:

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

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

<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
</script>

Помните, авторы создали предыдущий ul id.

Затем создайте список, который будет DocumentFragment:

<script>
// ...
const list = document.createDocumentFragment();
</script>

Все прикреплённые элементы списка будут добавлены в список. DocumentFragment не является частью активной древовидной структуры документа. Преимущество этого заключается в том, что перерисовка не влияет на производительность при изменении объектной модели документа.

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

<script>
// ...
const url = 'https://jsonplaceholder.typicode.com/users';
</script>

Теперь, используя API Fetch, вызовите API JSONPlaceholder с помощью fetch(), указав URL в качестве аргумента:

<script>
// ...
fetch(url)
</script>

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

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

<script>
// ...
fetch(url)
.then((response) => {})
</script>

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

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
</script>

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

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {})
</script>

В этой функции создайте переменную с именем author, которая будет равна данным:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
})
</script>

Для каждого автора в списке авторов необходимо создать элемент списка, отображающий его имя. Метод map() подходит для этого шаблона:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
});
})
</script>

В функции map создайте переменную li, равную createElement, с li (элементом HTML) в качестве аргумента. Также создайте тег h2 для имени и тег span для адреса электронной почты:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
});
})
</script>

Элемент h2 будет содержать имя автора. Элемент span — адрес электронной почты автора. Атрибут innerHTML и интерполяция строк позволяют это сделать:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
});
})
</script>

Затем добавьте эти элементы DOM с помощью appendChild:

<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
})
ul.appendChild(list);
</script>

Обратите внимание, что каждый элемент списка добавляется в список DocumentFragment. После завершения построения карты список добавляется в элемент неупорядоченного списка ul.

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

<script>
// ...
fetch(url)
.then((response) => {
// ...
})
.then((data) => {
// ...
})
.catch(function(error) {
console.log(error);
});
// ...
</script>

Вот полный код созданного вами запроса:

<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
const list = document.createDocumentFragment();
const url = 'https://jsonplaceholder.typicode.com/users';
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
}).
.catch(function(error) {
console.log(error);
});
ul.appendChild(list);
</script>

Вы только что успешно выполнили GET-запрос, используя API JSONPlaceholder и Fetch. Теперь вам нужно выполнить POST-запросы.

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

По умолчанию Fetch использует GET-запросы, но вы можете использовать все остальные типы запросов, изменять заголовки и отправлять данные. Давайте создадим POST-запрос.

Сначала включите постоянную переменную, которая содержит ссылку на API JSONPlaceholder:

const url = 'https://jsonplaceholder.typicode.com/users';

Далее вам нужно настроить объект и передать его в качестве второго аргумента функции fetch. Это будет объект с именем data, ключом Sammy (или вашим именем) и значением:

// ...
let data = {
name: 'Sammy'
}

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

// ...
let fetchData = {
}

Этот объект должен содержать три ключа: метод, тело и заголовок:

// ...
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}

Ключ метода будет иметь значение “POST”. Тело будет иметь формат JSON.stringify вновь созданного объекта данных. Заголовки будут иметь значение «Content-Type»: «application/json; charset=UTF-8».

Интерфейс заголовков — это функция Fetch API, которая позволяет выполнять действия с заголовками HTTP-запросов и ответов.

Разместив этот код, можно выполнить POST-запрос с помощью Fetch API. В POST-запрос Fetch необходимо добавить URL, fetchData и аргументы:

// ...
fetch(url, fetchData)

Функция then() содержит код, который обрабатывает ответ, полученный от API JSONPlaceholder:

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

Вот полный код созданного вами запроса:

const url = 'https://jsonplaceholder.typicode.com/users';
let data = {
name: 'Sammy'
}
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});

Вы также можете передать fetch() объекту Request.

const url = 'https://jsonplaceholder.typicode.com/users';
let data = {
name: 'Sammy'
}
let request = new Request(url, {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
});
fetch(request)
.then(function() {
// Handle response you get from the API
});

При таком подходе запрос можно использовать как единственный аргумент fetch(), заменив url и fetchData.

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

Результат

Хотя API Fetch пока поддерживается не всеми браузерами, он является прекрасной альтернативой XMLHttpRequest.

В этой статье:
,
Автор поста:
Следовать
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая статья
Следующая статья
Вам также может понравиться