Як використовувати Fetch API для AJAX викликів у сучасному JavaScript.

Вступ до Fetch API в сучасному JavaScript

У світі веб-розробки можливість отримання даних з сервера без повного оновлення сторінки стала справжньою зміною гри. Ця функціональність, яка часто називається AJAX (асинхронний JavaScript та XML), значно еволюціонувала протягом років. В сучасному JavaScript Fetch API став стандартом для виконання AJAX-запитів, пропонуючи потужний та гнучкий спосіб отримання ресурсів.

Розуміння Основ Fetch API

Fetch API надає глобальний метод ;fetch()>, який пропонує простий та логічний спосіб асинхронного отримання ресурсів через мережу. Цей метод повертає Promise, який вирішує відповідь на той запит, чи він був успішним чи ні. Це значна покращення порівняно зі старішими техніками, такими як об’єкт XMLHttpRequest (XHR), оскільки він використовує Promises для більш гнучкого оброблення помилок та чистіший код.

Перший AJAX-запит з Fetch

Отримання даних з сервера

Почнемо з простого прикладу: отримання даних з сервера. Основний синтаксис виклику Fetch виглядає наступним чином:

javascript
fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Виникла помилка!', error));

У цьому уривку ми запитуємо дані з ;https://example.com/data>. Метод ;fetch()> ініціює запит та повертає обіцянку. Коли обіцянка вирішується, вона повертає об’єкт Response. Потім ми використовуємо метод ;.json()> на цій відповіді, щоб видобути JSON-тіло відповіді. Нарешті, ми обробляємо будь-які помилки, які можуть виникнути під час отримання, за допомогою ;.catch()>.

Обробка POST-запитів

Fetch API призначений не лише для GET-запитів; він також може обробляти POST-запити. Щоб надіслати дані на сервер, ви налаштовуєте виклик ;fetch()>, включаючи об’єкт параметрів, де ви вказуєте метод, заголовки та тіло вашого запиту.

javascript
fetch('https://example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    key: 'value'
  }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Помилка:', error));

Розширене Використання Fetch API

Обробка Помилок

Одним із поширених помилок при використанні Fetch є обробка HTTP-помилок. Fetch відхилить обіцянку лише у випадку мережевої помилки, але не для статусів HTTP-помилок. Вам потрібно додати логіку для обробки таких випадків вручну:

javascript
fetch('https://example.com/data')
  .then(response => {
    if (!response.ok) {
        throw new Error('Мережева відповідь не була в порядку');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.log('Виникла проблема з вашим запитом:', error));

Робота з CORS

Обмеження спільного використання ресурсів (CORS) – це механізм, який дозволяє запитувати обмежені ресурси на веб-сторінці з іншого домену поза доменом, з якого був обслугований перший ресурс. Під час здійснення запитів між доменами важливо розуміти, що сервер повинен включити спеціальні заголовки для дозволу запиту. Невірна обробка CORS може призвести до невдалих запитів.
Fetch API відповідає політиці однакового походження, але надає можливість налаштувати режим запиту для роботи з CORS:

javascript
fetch('https://example.com/data', {
  mode: 'cors',
  // Додаткові параметри або заголовки
})

Висновок

Fetch API значно спростило процес виконання AJAX-запитів, надаючи більш потужний та гнучкий набір інструментів для розробників. Його архітектура на основі обіцянок пропонує чистий та зрозумілий спосіб обробки асинхронних операцій, що робить його гідним додатком до інструментарію будь-якого веб-розробника. Розуміючи та використовуючи Fetch API, розробники можуть створювати динамічні, реагуючі веб-додатки, які радують користувачів та надають безперервні враження.