Получение и вывод списка пользователей
console.log( 'Code is Poetry' );// Асинхронная функция для получения данных
async function fetchUsers() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users'); // Выполняем запрос
if (!response.ok) { // Проверяем успешность запроса
throw new Error(`Ошибка: ${response.status}`);
}
const users = await response.json(); // Парсим JSON
console.log(users); // Выводим список пользователей
} catch (error) {
console.error('Ошибка получения данных:', error); // Обработка ошибок
}
}
// Вызов функции
fetchUsers();
Выводим имена пользователей
async function fetchUserNames() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
// Выводим только имена пользователей
users.forEach(user => console.log(user.name));
} catch (error) {
console.error('Ошибка:', error);
}
}
fetchUserNames();
Отображение данных на странице (например, список в HTML)
async function displayUsers() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
const userList = document.getElementById('userList'); // Предполагается, что есть <ul id="userList">
users.forEach(user => {
const li = document.createElement('li');
li.textContent = `${user.name} (${user.email})`;
userList.appendChild(li);
});
} catch (error) {
console.error('Ошибка:', error);
}
}
displayUsers();
Обновление данных (POST запрос)
Если вы хотите отправить данные, например, создать нового пользователя:
async function createUser() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users', {
method: 'POST', // Указываем метод POST
headers: {
'Content-Type': 'application/json', // Тип передаваемых данных
},
body: JSON.stringify({
name: 'Новый пользователь',
email: 'newuser@example.com',
phone: '123-456-7890',
}),
});
const newUser = await response.json(); // Получаем результат
console.log('Созданный пользователь:', newUser);
} catch (error) {
console.error('Ошибка создания пользователя:', error);
}
}
createUser();
fetch — это встроенный метод JavaScript для выполнения HTTP-запросов. Он используется для взаимодействия с серверами, например, для получения данных, отправки данных или выполнения других операций с API.
Ключевые особенности fetch:
- Возвращает
Promise, который позволяет работать с результатами асинхронно. - Работает с разными методами HTTP-запросов (GET, POST, PUT, DELETE и др.).
- Простота работы с API и сервером.
fetch(url, options)
.then(response => {
// Обработка ответа
})
.catch(error => {
// Обработка ошибок
});
url— адрес, на который отправляется запрос.options(опционально) — объект с настройками (метод, заголовки, тело запроса и т. д.).response— объект ответа с методами для работы с данными (например,.json()).
Простая структура:
Пример получения данных:
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => {
if (!response.ok) { // Проверка на успешность
throw new Error(`HTTP ошибка: ${response.status}`);
}
return response.json(); // Преобразуем ответ в JSON
})
.then(data => {
console.log(data); // Работаем с данными
})
.catch(error => {
console.error('Ошибка:', error); // Обрабатываем ошибки
});
fetchотправляет запрос на сервер.response.ok— проверяет статус ответа (например,200 OK).response.json()— преобразует данные из формата JSON в объект JavaScript
Использование с async/await:
async function fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) {
throw new Error(`HTTP ошибка: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Ошибка:', error);
}
}
fetchData();
await fetch(url)ждёт завершения запроса.try/catchпозволяет легко обрабатывать ошибки.
Настройки запроса (options):
fetch можно настроить для работы с разными типами запросов.
Пример POST-запроса:
fetch('https://jsonplaceholder.typicode.com/users', {
method: 'POST', // HTTP метод
headers: {
'Content-Type': 'application/json', // Тип передаваемых данных
},
body: JSON.stringify({ name: 'John', email: 'john@example.com' }), // Тело запроса
})
.then(response => response.json())
.then(data => {
console.log('Успешно добавлено:', data);
})
.catch(error => {
console.error('Ошибка:', error);
});
method— задаёт тип запроса (GET, POST и т. д.).headers— устанавливает заголовки запроса (например,Content-Type).body— передаёт данные в запросе (для POST, PUT).
Преимущества fetch:
- Встроенная поддержка: не требует дополнительных библиотек.
- Обещания (
Promises): работает с асинхронностью и легко обрабатывается через.thenилиawait. - Гибкость: поддерживает кастомные заголовки, методы и тело запроса.
Недостатки:
- Ошибки HTTP (4xx, 5xx) не выбрасывают исключение автоматически — их нужно проверять вручную (
response.ok). - Не поддерживается в некоторых старых браузерах (например, IE).
Где применяется:
- Получение данных с REST API.
- Отправка данных на сервер.
- Интерфейсы для взаимодействия с внешними сервисами.
fetch заменяет устаревший метод XMLHttpRequest, предлагая современный и удобный способ работы с HTTP-запросами.