Робота з API в JavaScript: Практичні поради та приклади коду

7 Березня 2024 в 17:42 108

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

1. Використання fetch API

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

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

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

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

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

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

У цьому прикладі ми викликаємо API за допомогою методу fetch, отримуємо відповідь у форматі JSON і виводимо отримані дані в консоль. Також ми обробляємо можливі помилки за допомогою методу catch.

2. Використання XMLHttpRequest

XMLHttpRequest є старішим, але все ще широко використовуваним інтерфейсом для викликів API в JavaScript. Він дозволяє здійснювати синхронні або асинхронні запити та обробляти їх результати.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText));
    } else {
      console.error('Error fetching data:', xhr.statusText);
    }
  }
};
xhr.send();

var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange = function() {

if (xhr.readyState === XMLHttpRequest.DONE) {

if (xhr.status === 200) {

console.log(JSON.parse(xhr.responseText));

} else {

console.error('Error fetching data:', xhr.statusText);

}

};

xhr.send();

У цьому прикладі ми використовуємо XMLHttpRequest для виклику API. Метод open вказує тип запиту (GET), URL-адресу та спосіб виконання (асинхронно). Після виконання запиту ми перевіряємо статус відповіді і виводимо дані або обробляємо помилку.

3. Використання бібліотеки Axios

Axios є популярною бібліотекою для викликів API в JavaScript, яка базується на обіцянках та надає багато зручних функцій для роботи з API.

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error fetching data:', error));

axios.get('https://api.example.com/data')

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

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

У цьому прикладі ми використовуємо Axios для виклику API. Метод get виконує GET-запит до вказаної URL-адреси, а потім ми виводимо отримані дані або обробляємо помилку.

За допомогою цих методів ви можете зручно здійснювати виклики API в своїх JavaScript-додатках та ефективно обробляти отримані дані і помилки.