Валюта:
$
USD ($)
EUR (€)
UAH (₴)
DKK (Dkk)
SEK (Sek)
NOK (Nok)
JPY (¥)
CHF (₣)
GBP (£)
AUD (A$)
PLN (zł)
ILS (₪)
KZT (₸)
CAD (C$)
Показати ще
Регіон:
Не вказано
США
Україна
Ізраїль
Європа
Іспанія
Казахстан
Італія
Данія
Швеція
Норвегія
Німеччина
Швейцарія
Франція
Фінляндія
Нідерланди
Японія
Великобританія
Австралія
Канада
Польща
Мальта
Не вказано
Латвія
Показати ще
Мова:
UK
Розробка

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

Ласкаво просимо до заплутаного світу JavaScript! Якщо ви хочете підвищити рівень своєї майстерності в області отримання даних із сервера, ви потрапили за адресою. Сьогодні ми докладно розглянемо Fetch API – сучасний потужний інструмент для виконання HTTP-запитів на JavaScript.

164
15

Чому варто вибрати 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.

ДІЗНАЙТЕСЯ ЯК ОТРИМАТИ САЙТ ІЗ ЗНИЖКОЮ
Залиште свої дані та наші оператори передзвонять вам, щоб розрахувати вартість та погодити знижку спеціально для Вас
Статті
Публікації у нашому блозі

Якщо Вам цікаво дізнатися більше на тему "як використовувати fetch api у javascript", спеціально для Вас ми зробили добірку корисностей з нашого блогу.

всі статті
Є ідеї, але не знаєте, з чого почати?

Дайте відповідь на кілька запитань в онлайні і ми підкажемо!

Бриф – це коротка інформація про Ваш проект. Заповнивши онлайн-бриф на нашому сайті - ви заощадите час і позбавитеся від непотрібних розмов!

Дізнайтесь вартість проекту онлайн! ?
Дайте відповідь на кілька питань і дізнайтеся скільки коштує розробка Вашого сайту!
заповнити бриф
Дізнайтесь як вийти в ТОП у 2024! ?
Дайте відповідь на кілька запитань ОНЛАЙН і дізнайтеся, що потрібно, щоб Ваш сайт вийшов у ТОП !
заповнити бриф
Перейти на українську версію сайту?
Закрити
Так
Placeholder Image
SEO просування перший місяць -50%
8-31.08
Перейти