Запроси до HTTP / Api

fetch (відправка запиту)

Набір властивостей і методів, які дозволяють відправляти, отримувати та обробляти ресурси із сервера.

fetch("https://jsonplaceholder.typicode.com/users")
.then(response => {
// Response handling
})
.then(data => {
// Data handling
})
.catch(error => {
// Error handling
});

Коди відповідей сервера HTTP/s

Довідник HTTP-кодів

1XX — мають інформаційне призначення

2XX — коди успішного проведення операції

3XX — описують усе, що пов'язано з перенаправленням (redirect)

4XX — вказують на помилки з боку клієнта

5XX — вказують на помилки з боку сервера

200 (OK) — стандартна відповідь для успішних HTTP-запитів.

201 (Created) — стандартна відповідь для HTTP-запиту, який привів до успішного створення ресурсу.

400 (Bad Request) — запит не може бути оброблений через неправильний синтаксис запиту або іншу помилку клієнта.

401 (Unauthorized) — для доступу до ресурсу вимагається авторизація.

403 (Forbidden) — у клієнта немає дозволу на доступ до цього ресурсу.

404 (Not Found) — у цей час ресурс не знайдений. Можливо, він був видалений або ще не існує.

500 (Internal Server Error) — загальна відповідь на непередбачений збій сервера, якщо відсутня конкретніша інформація.

fetch (перевірка відповіді)

Значення промісу, який повертає метод fetch() — це об'єкт зі службовою інформацією про стан відповіді сервера. Цей об’єкт є екземпляром класу Response, який включає різні методи та властивості. Залежно від типу отримуваного контенту, використовуються різні методи для перетворення тіла відповіді у дані.

json() — парсить дані у JSON-форматі.

text() — парсить дані у простому текстовому форматі, наприклад .csv (табличні дані).

blob() — парсить дані, що описують файл, наприклад, зображення, аудіо або відео.

У прикладі нижче в першому методі then() виконується перевірка статусу відповіді й перетворення даних у правильний формат (парсинг) у разі успішного результату або явне створення помилки, щоб обробити невдалий HTTP-запит у методі catch().

fetch("https://jsonplaceholder.typicode.com/users")
.then(response => {
if (!response.ok) {
throw new Error(response.status);
}
return response.json();
})
.then(data => {
// Data handling
console.log(data);
})
.catch(error => {
// Error handling
console.log(error);
});

HTTP-методи

POST — створити новий ресурс

GET — отримати набір ресурсів або один ресурс

PUT — оновити існуючий або створити новий ресурс

PATCH — оновити існуючий ресурс

DELETE — видалити ресурс

const options = {
method: "GET"
};
fetch("<https://jsonplaceholder.typicode.com/users>", options)
.then(response => {
if (!response.ok) {
throw new Error(response.status);
}
return response.json();
})
.then(data => {
// Data handling
})
.catch(error => {
// Error handling
});

Для GET-запиту вказувати його в опціях fetch не потрібно, це метод запиту за замовчуванням.

HTTP-заголовки

Заголовки містять службову інформацію, що стосується запиту або відповіді. Наприклад:

Текстовий файл, який містить HTML, буде описаний типом text/html.

Якщо текстовий файл містить CSS, він буде описаний як text/css.

Дані у форматі JSON будуть описані як application/json.

Наприклад, якщо ми хочемо явно вказати, що у відповіді від бекенда ми очікуємо тільки JSON, то для цього додаємо заголовок Accept зі значенням application/json.

fetch("https://jsonplaceholder.typicode.com/users", {
headers: {
Accept: "application/json",
},
}).then(response => {
// ...
});