Задача №1
Напишите функцию, которая делает AJAX-запрос и возвращает Promise. URL запроса: https://jsonplaceholder.typicode.com/posts/1. Результат запроса должен содержать ID, заголовок и тело сообщения.
Решение:
// Создаем функцию makeRequest(), которая возвращает новый Promise объект
function makeRequest() {
return new Promise((resolve, reject) => {
// Создаем новый объект XMLHttpRequest для отправки запроса на сервер
const xhr = new XMLHttpRequest();
// Устанавливаем метод и URL для запроса
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
// Устанавливаем обработчик события для ответа на запрос
xhr.onload = () => {
// Если статус ответа равен 200, то разбираем ответ и создаем новый объект с нужными свойствами
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
const result = {
id: response.id,
title: response.title,
body: response.body
};
// Решаем Promise с полученным объектом
resolve(result);
} else {
// Если статус ответа не равен 200, то отклоняем Promise с сообщением о причине ошибки
reject(xhr.statusText);
}
};
// Устанавливаем обработчик события для ошибок при запросе
xhr.onerror = () => reject(xhr.statusText);
// Отправляем запрос на сервер
xhr.send();
});
}
Описание решения:
Эта функция отправляет GET-запрос на URL https://jsonplaceholder.typicode.com/posts/1 и возвращает Promise, который разрешается после получения ответа от сервера.
Задача №2
Напишите функцию, которая делает POST-запрос на URL https://jsonplaceholder.typicode.com/posts и возвращает Promise. Тело запроса должно содержать заголовок и тело сообщения.
Решение:
function makeRequest() {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest(); // создаем новый объект XMLHttpRequest
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts'); // задаем тип запроса и URL-адрес сервера, куда отправляется запрос
xhr.setRequestHeader('Content-Type', 'application/json'); // устанавливаем заголовок Content-Type для отправки данных в формате JSON
xhr.onload = () => {
if (xhr.status === 201) { // если сервер вернул успешный ответ (код 201), то преобразуем полученный JSON-ответ в объект и передаем его в качестве результата
const response = JSON.parse(xhr.responseText);
resolve(response);
} else { // если произошла ошибка, то передаем текст статуса ошибки в качестве причины отклонения
reject(xhr.statusText);
}
};
xhr.onerror = () => reject(xhr.statusText); // если произошла ошибка сети, то передаем текст статуса ошибки в качестве причины отклонения
const data = JSON.stringify({ // преобразуем данные в формат JSON
title: 'foo',
body: 'bar',
userId: 1
});
xhr.send(data); // отправляем запрос на сервер с данными в формате JSON
});
}
Описание решения:
Эта функция отправляет POST-запрос на URL https://jsonplaceholder.typicode.com/posts с заголовком и телом сообщения в формате JSON и возвращает Promise, который разрешается после получения ответа от сервера.
Задача №3
Напишите функцию, которая делает запрос на URL https://jsonplaceholder.typicode.com/comments?postId=1 и выводит в консоль все комментарии к сообщению с ID = 1.
Решение:
function fetchComments() {
// Используем метод fetch для отправки GET-запроса к API и получения данных
fetch('https://jsonplaceholder.typicode.com/comments?postId=1')
// Обрабатываем полученный ответ, используя метод .json(), который преобразует полученные данные в объект JavaScript
.then(response => response.json())
// Обрабатываем полученные данные
.then(data => console.log(data))
// Обрабатываем ошибку, если она возникнет при выполнении запроса
.catch(error => console.error(error));
}
Описание решения:
Эта функция использует метод fetch для отправки GET-запроса на URL https://jsonplaceholder.typicode.com/comments?postId=1 и выводит результат в консоль.
Задача №4
Напишите функцию, которая делает запрос на URL https://jsonplaceholder.typicode.com/users и выводит в консоль список всех пользователей в формате: "ID: Имя пользователя (Email)".
Решение:
function fetchUsers() {
// Получаем данные пользователей с сервера
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json()) // преобразуем ответ в формате JSON
.then(data => {
// для каждого пользователя в массиве выводим информацию в консоль
data.forEach(user => {
console.log(`${user.id}: ${user.name} (${user.email})`);
});
})
.catch(error => console.error(error)); // обрабатываем ошибки
}
Описание решения:
Эта функция использует метод fetch для отправки GET-запроса на URL https://jsonplaceholder.typicode.com/users и выводит список пользователей в консоль.
Задача №5
Напишите функцию, которая делает запрос на URL https://jsonplaceholder.typicode.com/photos?albumId=1 и выводит в консоль все фотографии из альбома с ID = 1.
Решение:
function fetchPhotos() {
// Отправляем GET запрос на https://jsonplaceholder.typicode.com/photos?albumId=1
fetch('https://jsonplaceholder.typicode.com/photos?albumId=1')
// Получаем ответ в формате JSON
.then(response => response.json())
// Выводим полученные данные в консоль
.then(data => console.log(data))
// Обрабатываем ошибки и выводим сообщение об ошибке в консоль
.catch(error => console.error(error));
}
Описание решения:
Эта функция использует метод fetch для отправки GET-запроса на URL https://jsonplaceholder.typicode.com/photos?albumId=1 и выводит результат в консоль.
Задача №6
Напишите функцию, которая делает запрос на URL https://jsonplaceholder.typicode.com/todos и выводит в консоль список задач, отсортированных по убыванию приоритета.
Решение:
function fetchTodos() {
// Делаем GET-запрос к API и получаем данные в формате JSON
fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())
// Сортируем данные по полю userId в обратном порядке и выводим каждый элемент массива в консоль
.then(data => {
data.sort((a, b) => b.userId - a.userId);
data.forEach(todo => {
console.log(`${todo.id}: ${todo.title} (${todo.completed})`);
});
})
.catch(error => console.error(error));
}
Описание решения:
Эта функция использует метод fetch для отправки GET-запроса на URL https://jsonplaceholder.typicode.com/todos, сортирует результат по убыванию приоритета и выводит список задач в консоль.
Задача №7
Напишите функцию, которая делает запрос на URL https://jsonplaceholder.typicode.com/albums и выводит в консоль список альбомов, отсортированных по возрастанию ID пользователя.
Решение:
function fetchAlbums() {
fetch('https://jsonplaceholder.typicode.com/albums') // отправляем GET-запрос на сервер
.then(response => response.json()) // преобразуем ответ сервера в объект JavaScript
.then(data => {
data.sort((a, b) => a.userId - b.userId); // сортируем данные по полю userId
data.forEach(album => {
console.log(`${album.id}: ${album.title} (${album.userId})`); // выводим информацию об альбоме
});
})
.catch(error => console.error(error)); // обработка ошибок
}
Описание решения:
Эта функция использует метод fetch для отправки GET-запроса на URL https://jsonplaceholder.typicode.com/albums, сортирует результат по возрастанию ID пользователя и выводит список альбомов в консоль.
Задача №8
Напишите функцию, которая делает запрос на URL https://jsonplaceholder.typicode.com/posts/1/comments и выводит в консоль все комментарии к сообщению с ID = 1.
Решение:
function fetchComments() {
fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
}
Описание решения:
Эта функция использует метод fetch для отправки GET-запроса на URL https://jsonplaceholder.typicode.com/posts/1/comments и выводит результат в консоль.
Задача №9
Напишите функцию, которая делает запрос на URL https://jsonplaceholder.typicode.com/posts/1 и изменяет заголовок сообщения на "New Title".
Решение:
function updatePostTitle() {
fetch('https://jsonplaceholder.typicode.com/posts/1') // делаем GET запрос на сервер для получения объекта поста с id = 1
.then(response => response.json())
.then(data => {
data.title = 'New Title'; // изменяем заголовок поста
return fetch('https://jsonplaceholder.typicode.com/posts/1', { // делаем PUT запрос на сервер для обновления объекта поста
method: 'PUT', // указываем метод запроса
body: JSON.stringify(data), // передаем обновленный объект в теле запроса
headers: {
'Content-Type': 'application/json' // указываем заголовок Content-Type для корректного парсинга тела запроса на сервере
}
});
})
.then(response => response.json()) // парсим ответ сервера в формате json
.then(data => console.log(data)) // выводим обновленный объект на консоль
.catch(error => console.error(error)); // выводим ошибки в консоль, если они есть
}
Описание решения:
Эта функция использует метод fetch для отправки GET-запроса на URL https://jsonplaceholder.typicode.com/posts/1, изменяет заголовок сообщения и отправляет обновленные данные на сервер методом PUT.
Задача №10
Напишите функцию, которая делает запрос на URL https://jsonplaceholder.typicode.com/posts/1 и удаляет сообщение с ID = 1.
Решение:
function deletePost() {
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE'
})
.then(response => console.log(response.status))
.catch(error => console.error(error));
}
Описание решения:
Эта функция использует метод fetch для отправки запроса на URL https://jsonplaceholder.typicode.com/posts/1 методом DELETE и выводит статус ответа в консоль.
Заключение
Мы рассмотрели 10 задач с решениями, которые помогут закрепить новый материал про асинхронный JavaScript и AJAX. Теперь вы знаете, как делать AJAX-запросы, обрабатывать ответы от сервера и изменять данные на сервере.
