Основи роботи з API через Fetch у JavaScript: приклади та поради

Основи роботи з API в JavaScript

Коли мова заходить про те, що таке робота з API JavaScript, кожен JS-розробник, який поважає себе, одразу ж згадує про fetch – функцію, що дає змогу взаємодіяти з сервером легко й елегантно. Але як це працює на практиці, і що робить fetch таким зручним? Давай розбиратися!

А якщо ти хочеш вивчити на практиці цю мову програмування, записуйся на курси FoxmindEd.

Що таке API і як воно працює в JavaScript

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

У JavaScript API запит робить додаток динамічним. Коли твій код посилає запит на сервер через API, він отримує відповідь у вигляді JSON (JavaScript Object Notation) – структурованого формату даних, який легко перетворюється на об’єкти JavaScript. Як підсумок, у тебе з’являється можливість маніпулювати цими даними: фільтрувати, перетворювати або надсилати користувачеві в красивому вигляді.

Принципи взаємодії з API через Fetch

fetch у JavaScript – це зручний метод для взаємодії з API. Ти просто вказуєш адресу сервера і – вуаля! – можна отримувати, надсилати або оновлювати дані. Процес обміну даних через цю функцію простий і складається з декількох кроків:

1. Надсилання запиту до сервера.
2. Отримання відповіді, яка може бути позитивною або негативною (у разі помилки).
3. Обробка даних відповіді (парсинг, відображення тощо).

fetch використовує проміси (Promises), які дають змогу писати асинхронний код. Це означає, що запит виконується у фоновому режимі, не блокуючи виконання інших ділянок коду. Як результат, користувач не побачить “підвисання” програми, поки ти завантажуєш дані.

Переваги Fetch порівняно з іншими методами

Чому саме ця функція стала такою популярною? Раніше для запитів використовували XMLHttpRequest, але він поступається fetch за простотою і читабельністю. Якщо раніше написання запиту займало кілька рядків коду, то тепер можна обмежитися одним. До того ж, ця функція вбудована в більшість сучасних браузерів, тож про сумісність можна не турбуватися.

Переваги:

• Простота використання.
• Підтримка промісів.
• Можливість роботи з асинхронними даними.
• Легкість обробки помилок (ні, серйозно, спробуй одного разу і зрозумієш, чому це круто).

FoxmindEd – це навчальний центр, що має велику різноманітність напрямків курсів для новачків та програмістів з досвідом!

Тільки починаєте свій шлях в ІТ? Спробуйте курси Start

Вже маєте базові навички програмування? Тоді
курси Junior саме для вас.

Хочете поглибити свої знання в ІТ? Ми маємо курси Middle/Senior

Fetch запити в JavaScript

Коли ти вже трохи познайомився з API, можна переходити до практики і почати з того, щоб відправити fetch запит у JavaScript.

Як надіслати Fetch запит у JavaScript

Найбазовіший приклад має приблизно такий вигляд:

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

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

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

  .catch(error => console.error('Error:', error));

Тут ми робимо GET-запит до API і виводимо дані в консоль. Функція повертає проміс, який ми обробляємо за допомогою .then() і .catch(). Якщо сервер відповідає з кодом 200, все пройшло успішно, і ми отримуємо дані. Якщо ні, ловимо помилку через .catch().

Обробка відповідей з використанням Fetch

Обробляти дані відповіді нескладно. Найчастіше відповідь приходить у вигляді JSON-формату, який треба перетворити на об’єкт JavaScript:

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

  .then(response => {

    if (!response.ok) {

      throw new Error('Network error');

    }

    return response.json();

  })

  .then(data => {

    // Working with data

    console.log(data);

  })

  .catch(error => {

    console.error('Something went wrong:', error);

  });

У прикладі вище, ми перевіряємо, чи успішно пройшов запит, і тільки після цього парсимо JSON. Такий підхід дає змогу вчасно відловити помилку і попередити “падіння” програми. У джаваскрипт можна “нафейлити” програму через маленьку помилку, тому завжди перевіряй, чи вірна відповідь прийшла з сервера.

Приклад Fetch запиту до API

Припустимо, ми хочемо отримати список користувачів:

fetch('https://jsonplaceholder.typicode.com/users')

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

  .then(users => {

    users.forEach(user => {

      console.log(`${user.name} (${user.email})`);

    });

  })

  .catch(error => console.error('Error while receiving data:', error));

Тут ми отримуємо масив користувачів і виводимо їхні імена та email. Усе досить просто і наочно!

Приклади використання Fetch у реальних проектах

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

Запит даних із сервера через Fetch

У кожному застосунку потрібно підтягувати дані з сервера – це можуть бути пости в блозі, профілі користувачів, коментарі тощо. Fetch запити в JavaScript дають змогу динамічно довантажувати цю інформацію, не перевантажуючи інтерфейс.

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

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

  .then(posts => {

    posts.forEach(post => console.log(post.title));

  })

  .catch(error => console.error('Error loading posts:', error));

Такий підхід ідеально підходить для роботи з великими обсягами даних. Не потрібно перезавантажувати сторінку – контент оновлюється на льоту.

Побудова динамічних веб-додатків з Fetch

Уяви, що ти створюєш чат-додаток або дошку завдань (ні, ну хоч раз бачив повністю описане завдання в Jira?). У таких проєктах важливо мати можливість швидко надсилати й отримувати дані, і тут fetch рятує становище. Наприклад, при створенні нового завдання ти можеш відправити дані відразу на сервер:

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

  method: 'POST',

  headers: {

    'Content-Type': 'application/json'

  },

  body: JSON.stringify({ title: 'New task', completed: false })

})

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

  .then(task => console.log('Task added:', task))

  .catch(error => console.error('Error adding a task:', error));

Інтеграція Fetch із зовнішніми API

Не секрет, що інтеграція з популярними API (наприклад, GitHub, Twitter або Google Maps) дає змогу додавати в додатки круті фішки. Розглянемо javascript fetch приклад для отримання даних із цих сервісів:

fetch('https://api.github.com/users/user_name')

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

  .then(profile => console.log('User profile:', profile))

  .catch(error => console.error('Error loading profile:', error));

За допомогою простого запиту можна отримати інформацію про користувача і вбудувати її просто в застосунок.

Висновок

Тепер ти знаєш, як працює fetch і чому він став стандартом для роботи з API в JavaScript. Обирай потрібні приклади, пробуй на практиці і будь упевнений, що наступний API-запит не розчарує тебе.