Як використовувати Fetch API у JavaScript

Чому варто вибрати Fetch API замість традиційних методів

У попередні часи для запиту даних використовувався метод XMLHttpRequest. Але слід визнати, що зараз цей метод уже застарів. Він громіздкий, вимагає більше рядків коду і використовує шаблон зворотного виклику, який не такий простий, як новіша структура, заснована на обіцянках. Fetch API пропонує набагато сучасніший спосіб взаємодії з сервером. Цей власний JavaScript API заснований на обіцянках, тобто використовує обіцянки для обробки результатів та відмов, що робить код більш читабельним та керованим.

Більш того, він дозволяє використовувати сучасний синтаксис async/await для створення ще більш чистого та інтуїтивно зрозумілого коду. Fetch API вбудований у JavaScript, тому вам не потрібно покладатися на зовнішні бібліотеки, такі як Axios або jQuery. Це спрощує ланцюжок залежностей у проекті та робить пошук несправностей більш зрозумілим.

Основи синтаксису: Розбираємо по поличках

Коли ми говоримо про API Fetch, одним з перших спадає на думку простота його синтаксису. У найпростішому випадку необхідно вказати URL-адресу, з якої потрібно отримати дані. Ось як виглядає синтаксис у найпростішому вигляді:

fetch('https://api.example.com/data')

Цей фрагмент коду по суті просить браузер перейти по вказаному URL і отримати дані . Функція повертає Promise, що дозволяється в об'єкт Response, що представляє виконаний запит. Зверніть увагу, що потрібно лише URL, що спрощує роботу з Fetch.

GET-запит: Ваш перший запит

Отримання даних із сервера - одна з найпоширеніших операцій у веб-розробці. З цією метою служить запит GET. Для виконання GET-запиту достатньо викликати функцію fetch із зазначенням URL ресурсу, який необхідно отримати. Після отримання даних можна перетворити їх у формат JSON для зручнішої роботи з ними.

fetch('https://api.example.com/data')

  .then(response => response.json())

 data))

Цей код отримує дані із заданого URL, перетворює отримане корисне навантаження в JSON і виводить її в консоль. Метод then визначає, що робити після дозволу Promise. Це ланцюговий метод, тобто ви можете підключити ще один метод then для обробки наступних дій.

Обробка HTTP-відповідей

Fetch не відхиляє обіцянку для кодів стану помилки сервера. Таким чином виникає необхідність перевірити властивість ok об'єкта Response, щоб переконатися в успішності запиту. Якщо цього не зробити, то програма може повестися не так, як очікувалося.

fetch('https://api.example.com/data')

  .then(response => {

    .ok) {

      throw new Error('Network response was not ok');

    }

    return response.json();

  })

 .then(data => console.log(data))

  .

Цей фрагмент коду не тільки отримує дані, але й перевіряє, чи без помилок відповів сервер. Перевіряти наявність помилок завжди корисно, щоб переконатися, що ви не працюєте з неякісними даними. Метод catch оброблятиме будь-які помилки, пов'язані з проблемами в мережі або з введеною URL-адресою.

POST-запит: Надсилання даних

У той час як запит GET витягує дані, запит POST відправляє їх на сервер. Щоб виконати POST-запит за допомогою Fetch, можна додати об'єкт settings як другий аргумент функції Fetch. Об'єкт settings дозволяє вказати метод, заголовки та тіло запиту.

fetch('https://api.example.com/data', {

  метод: 'POST',

  заголовки: { 'Content-Type': 'application /json'

  },

  body: JSON.stringify({key: 'value'})

});

Тут властивість method вказує на те, що ми робимо POST-запит. Властивість headers задає тип вмісту як JSON, а властивість body містить корисне навантаження, яке ми хочемо відправити, також у форматі JSON. Така конфігурація гарантує, що і клієнт, і сервер зрозуміють дані, що відправляються.

Робота із заголовками

Додавання заголовків у запит Fetch може мати вирішальне значення при роботі з API, що потребують автентифікації або спеціальних типів вмісту. Fetch дозволяє легко додавати заголовки. Ви можете включити їх в об'єкт options за допомогою ключа headers .

fetch('https://api.example.com/data', {

  заголовки: {

   ''Autho   }

})

У наведеному вище коді додається заголовок Authorization для передачі маркера для автентифікованих маршрутів. Заголовки також можуть бути використані для керування кешем, вказівки типів вмісту, управління обмеженнями CORS (Cross-Origin Resource Sharing) і т.д.

Використання параметрів запиту

Додавання параметрів запиту до URL у Fetch - часте вимога. Ви можете вручну конкатенувати параметри в URL або використовувати власні класи JavaScript URL та URLSearchParams для їх програмного додавання.

let url = new URL('https://api.example.com/data'),

   params = {id: 123, name: 'John'} ⟂ params).forEach(key => url.searchParams.append(key, params[key]))

fetch(url);

Таким чином, можна додавати стільки параметрів запиту, скільки необхідно, не переймаючись тим, щоб вручну кодувати їх або допускати синтаксичні помилки в рядку URL. Це підвищує читання та зручність супроводу коду.

Об'єкти запитів та відповідей

Fetch надає спеціалізовані об'єкти Request та Response . Вам потрібно створити об'єкт Request , якщо ви хочете керувати певними налаштуваннями, наприклад, кешуванням. Потім цей об'єкт можна передати як аргумент у fetch .

let req = new Request('https://api.example.com/data', { method: 'GET', cache: 'reload' });

fetch(req);

Використання об'єктів Request і Response дозволяє більш тонко керувати різними аспектами циклу "запит - відповідь", наприклад. Це відкриває можливості створення складних конфігурацій, які простий виклик Fetch може не врахувати.

Async/Await з функцією Fetch

Хоча Fetch API з обіцянками є чистим, ви можете зробити його ще чистіше, використовуючи async/await. Це робить код більш читаним та простим для розуміння, особливо якщо ви маєте справу із серією асинхронних операцій.

async-функція fetchData() {

 const response = await fetch('https://api.example.com/data');

  const data = await response.json();

 console.log(data);

}

Тут функція async fetchData , який призупиняє виконання функції до дозволу Promise. Після отримання даних вони перетворюються на JSON і виводяться в консоль.

Переривання вибірки

Недоліком Fetch є неможливість скасування запиту після його ініціювання. Однак Fetch API пропонує інтерфейс AbortController для переривання запитів на вибірку.

const controller = новий AbortController();

const { signal } = controller;

fetch('https://api.example.com/data', { signal })

  .catch(err => { name === 'AbortError') {

      console.log('Fetch aborted');

⠊ |

controller.abort();

Зв'язавши сигнал AbortController з вибіркою, ви можете згодом викликати controller.abort() для скасування запиту. Ця можливість корисна для сценаріїв, в яких необхідно надати користувачам можливість скасовувати запити, що довго виконуються.

Підтримка браузерів: Що необхідно знати

Fetch API підтримується більшістю сучасних веб-браузерів, включаючи Chrome, Firefox та Safari. Однак, варто зазначити, що він не підтримується в Internet Explorer. Якщо ви прагнете широкої сумісності, то, можливо, вам доведеться включити поліфіл для браузерів, які не підтримують Fetch.