1. Получение
списка книг через REST API
Рассмотрим пример
взаимодействия веб-приложения с сервером для получения списка книг электронной
библиотеки университета.
HTTP-запрос:
GET
/api/books
Accept:
application/json
Пример ответа сервера:
HTTP/1.1
200 OK
Content-Type:
application/json
[
{
"id": 1,
"title": "Основы
программирования",
"author": "Иванов"
},
{
"id": 2,
"title":
"WEB-технологии",
"author": "Петров"
}
]
JavaScript-код:
async
function loadBooks() {
const response = await
fetch("/api/books");
if (!response.ok) {
throw new Error("Ошибка загрузки книг");
}
const books = await response.json();
console.log(books);
}
loadBooks().catch(error
=> console.log(error.message));
Объяснение:
GET — HTTP-метод
для получения данных.
/api/books —
адрес коллекции книг.
Accept —
заголовок, указывающий ожидаемый формат ответа.
200 OK — успешное
выполнение запроса.
JSON — формат
передачи структурированных данных.
fetch() —
отправляет запрос на сервер.
Результат:
Клиент отправляет
запрос, сервер возвращает список книг в формате JSON, а JavaScript выводит
полученные данные в консоль.
Для выполнения
примера необходим сервер с API /api/books.
2. Создание
нового ресурса с помощью POST
Рассмотрим пример
добавления нового учебного курса в систему университета.
HTTP-запрос:
POST
/api/courses
Content-Type:
application/json
{
"name": "Компьютерные
сети",
"credits": 5
}
Пример успешного
ответа сервера:
HTTP/1.1
201 Created
Content-Type:
application/json
Location:
/api/courses/15
{
"id": 15,
"name": "Компьютерные сети",
"credits": 5
}
JavaScript-код:
async
function createCourse() {
const course = {
name: "Компьютерные сети",
credits: 5
};
const response = await
fetch("/api/courses", {
method: "POST",
headers: {
"Content-Type":
"application/json"
},
body: JSON.stringify(course)
});
if (!response.ok) {
throw new Error("Не удалось создать курс");
}
const result = await response.json();
console.log(result);
}
createCourse().catch(error
=> console.log(error.message));
Объяснение:
POST — метод
создания ресурса.
Content-Type —
указывает формат передаваемых данных.
JSON.stringify()
— преобразует объект JavaScript в JSON-строку.
201 Created —
означает успешное создание ресурса.
Location —
указывает адрес созданного ресурса.
Результат:
Сервер получает
информацию о курсе, проверяет данные и создаёт новую запись.
В данном примере
созданному курсу присваивается идентификатор 15.
Для работы
необходим сервер, поддерживающий создание курсов.
3. Проверка
данных и обработка ошибок API
Рассмотрим пример
регистрации студента на учебный курс.
Предположим, что
сервер требует положительный идентификатор студента и курса.
HTTP-запрос:
POST
/api/enrollments
Content-Type:
application/json
{
"studentId": 12,
"courseId": -3
}
Пример ответа
сервера:
HTTP/1.1
400 Bad Request
Content-Type:
application/json
{
"error": "Некорректный идентификатор курса"
}
JavaScript-код:
async
function enrollStudent() {
const response = await
fetch("/api/enrollments", {
method: "POST",
headers: {
"Content-Type":
"application/json"
},
body: JSON.stringify({
studentId: 12,
courseId: -3
})
});
if (!response.ok) {
const errorData = await
response.json();
console.log("Ошибка:", errorData.error);
return;
}
console.log("Регистрация
выполнена");
}
enrollStudent().catch(()
=> {
console.log("Не удалось связаться с
сервером");
});
Объяснение:
400 Bad Request —
сообщает о некорректных данных запроса.
response.ok —
проверяет успешность HTTP-ответа.
response.json() —
получает сообщение об ошибке из ответа.
Серверная
валидация — проверка обязательных полей, типов и допустимых значений.
Результат:
Поскольку
идентификатор курса имеет недопустимое значение -3, сервер отклоняет запрос.
Клиент выводит
сообщение:
Ошибка:
Некорректный идентификатор курса
Пример
предполагает, что сервер реализует указанные правила проверки и формат ошибок.