JS об'єкт Fetch

Введення в об'єкт Fetch

Fetch є сучасним інтерфейсом для здійснення мережевих запитів у JavaScript. Це сучасна альтернатива XMLHttpRequest і є частиною Web API, що робить його доступним у більшості сучасних веб-браузерів.

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

Приклад:

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

Тут ми робимо запит до вказаного URL. Метод fetch() повертає обіцянку, яка при успішному виконанні запиту переходить до наступного етапу (використовуючи метод then()). У нашому випадку, коли отримана відповідь від сервера, ми її перетворюємо в JSON-формат за допомогою методу response.json(). Після цього, далі ми обробляємо отримані дані. Якщо під час виконання запиту виникає помилка, вона буде виведена в консоль завдяки блоку catch.

Однією з великих переваг Fetch є його здатність легко обробляти різні формати відповіді, такі як JSON, текст або бінарні дані. Це робить Fetch ідеальним вибором для більшості мережевих операцій у сучасних веб-додатках.

Додатково, завдяки обіцянкам, ви можете легко комбінувати різні мережеві запити, використовуючи методи Promise.all() або Promise.race(), що дозволяє здійснювати паралельні запити або обирати запит, який завершиться першим відповідно.

Основні методи і властивості

Давайте розглянемо основні аспекти роботи з Fetch, його методи та властивості, а також як ефективно його використовувати.

Метод fetch()

Цей метод використовується для ініціації мережевого запиту. Він приймає один обов'язковий аргумент – URL ресурсу, до якого слід звертатися, а також може приймати необов'язковий аргумент у вигляді об'єкта параметрів.

Приклад:

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

У цьому прикладі ми виконуємо GET-запит до URL 'https://api.example.com/data' і вказуємо, що очікуємо отримати дані у форматі JSON. Коли відповідь отримана, ми перетворюємо її у JSON і виводимо дані у консоль.

Властивість response.headers

Після виконання запиту за допомогою fetch() ви можете отримати доступ до заголовків відповіді за допомогою властивості headers об'єкта відповіді.

Приклад:

fetch('https://api.example.com/data')
.then(response => {
    console.log(response.headers.get('Content-Type'));
    return response.json();
})
.then(data => console.log(data));

Тут ми запитуємо заголовок 'Content-Type' з відповіді. Це допомагає нам з'ясувати, у якому форматі ми отримали дані.

Метод response.json()

Якщо ви знаєте, що відповідь сервера містить JSON-дані, ви можете використовувати цей метод для перетворення відповіді у формат JSON.

Приклад:

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));

У цьому прикладі ми знову робимо запит до сервера і, отримавши відповідь, одразу перетворюємо її на JSON. Потім ми можемо легко працювати з отриманими даними.

Метод response.text()

Якщо ви хочете отримати відповідь у текстовому форматі (наприклад, HTML або простий текст), ви можете використовувати метод response.text().

Приклад:

fetch('https://api.example.com/page')
.then(response => response.text())
.then(content => console.log(content));

Тут ми робимо запит до ресурсу, який повертає HTML-сторінку. Після отримання відповіді ми перетворюємо її у текстовий формат і виводимо зміст сторінки у консоль.

Синтаксис

fetch(url, [options])
    .then(response => {
        // обробка відповіді
    })
    .catch(error => {
        // обробка помилки
    });

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4

fetch('https://api.example.com/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Іван',
    age: 30
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Помилка:', error));

let formData = new FormData(document.querySelector('form'));

fetch('https://api.example.com/register', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Помилка при відправці форми:', error));

const userData = {
  name: "Іван",
  email: "[email protected]"
};

fetch('https://api.example.com/user/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Помилка при оновленні даних користувача:', error));

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Помилка при завантаженні даних:', error));

Методи

Властивості