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

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

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

Довідник 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() — це об'єкт зі службовою інформацією про стан відповіді сервера. Цей об’єкт є екземпляром класу 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);
  });

• 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 не потрібно, це метод запиту за замовчуванням.

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

• Текстовий файл, який містить 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 => {
  // ...
});