Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Інтеграція Сторонніх Бібліотек у JavaScript | Асинхронний JavaScript та Інтеграція API
Просунуте Володіння JavaScript

bookІнтеграція Сторонніх Бібліотек у JavaScript

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

Чому варто використовувати Axios або інші бібліотеки замість вбудованого fetch()?

Хоча API fetch() є потужним, він має певні обмеження, які вирішують сторонні бібліотеки, такі як Axios:

  • Автоматичний парсинг JSON: Axios автоматично обробляє JSON-відповіді, тоді як у випадку з fetch() потрібно вручну викликати response.json();
  • Тайм-аути: Axios дозволяє встановлювати тайм-аути для запитів, що не підтримується нативно у fetch();
  • Інтерцептори запитів та відповідей: Axios надає інтерцептори, які дозволяють виконувати функції перед відправкою запиту або після отримання відповіді, що корисно для додавання токенів автентифікації чи логування запитів;
  • Простіший синтаксис: Axios має простіший і більш послідовний синтаксис для виконання запитів та обробки відповідей;
  • Підтримка старих браузерів: Axios має вбудовану підтримку старих браузерів, які можуть не повністю підтримувати нативний API fetch().

Базове використання Axios

Axios забезпечує простий синтаксис для виконання як GET, так і POST запитів. Він повертає Promises, як і fetch(), але автоматично обробляє деякі рутинні завдання, наприклад, парсинг JSON.

GET-запит з використанням Axios

index.html

index.html

index.js

index.js

copy

Цей приклад демонструє використання Axios для GET-запиту. Функція getPostWithAxios викликає axios.get() для отримання даних з API-ендпоінту (/posts/1). Axios спрощує процес, автоматично розбираючи JSON-відповідь, що усуває необхідність окремого виклику .json(). Блок try...catch обробляє всі помилки, відображаючи або заголовок поста, або повідомлення про помилку в HTML.

POST-запит з Axios

index.html

index.html

index.js

index.js

copy

Цей приклад демонструє POST-запит із використанням Axios для надсилання даних до API. Функція sendPostWithAxios викликає axios.post() із кінцевою точкою API (/posts) та даними для нового поста, включаючи title, body та userId. Axios автоматично надсилає дані у форматі JSON, що спрощує процес. Блок try...catch обробляє всі помилки, відображаючи або назву створеного поста, або повідомлення про помилку в HTML.

Обробка помилок з Axios

Axios надає простий у використанні механізм для обробки помилок. Якщо запит не вдається (наприклад, через мережеву проблему або помилку сервера), Axios автоматично генерує помилку, яку можна обробити за допомогою try...catch.

index.html

index.html

index.js

index.js

copy

Цей приклад демонструє обробку помилок з Axios. Функція getInvalidPost намагається отримати дані з неіснуючого кінцевого пункту за допомогою axios.get(). Коли запит не вдається, Axios автоматично генерує помилку. Блок try...catch перехоплює цю помилку та відображає повідомлення про помилку в HTML.

Додаткові можливості та переваги Axios

Розглянемо деякі додаткові можливості Axios.

Перехоплювачі запитів і відповідей

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

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Підтримка тайм-ауту

Axios дозволяє встановлювати тайм-аути для запитів, що гарантує уникнення нескінченного очікування відповіді.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Спрощене оброблення помилок

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

Підтримка браузерів

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

1. Що Axios автоматично робить під час обробки JSON-відповідей?

2. Який метод слід використовувати для надсилання POST-запиту за допомогою Axios?

question mark

Що Axios автоматично робить під час обробки JSON-відповідей?

Select the correct answer

question mark

Який метод слід використовувати для надсилання POST-запиту за допомогою Axios?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 8

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you show me a basic example of using Axios for a GET request?

How do I handle errors with Axios in my code?

What are some advanced features of Axios I should know about?

Awesome!

Completion rate improved to 2.22

bookІнтеграція Сторонніх Бібліотек у JavaScript

Свайпніть щоб показати меню

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

Чому варто використовувати Axios або інші бібліотеки замість вбудованого fetch()?

Хоча API fetch() є потужним, він має певні обмеження, які вирішують сторонні бібліотеки, такі як Axios:

  • Автоматичний парсинг JSON: Axios автоматично обробляє JSON-відповіді, тоді як у випадку з fetch() потрібно вручну викликати response.json();
  • Тайм-аути: Axios дозволяє встановлювати тайм-аути для запитів, що не підтримується нативно у fetch();
  • Інтерцептори запитів та відповідей: Axios надає інтерцептори, які дозволяють виконувати функції перед відправкою запиту або після отримання відповіді, що корисно для додавання токенів автентифікації чи логування запитів;
  • Простіший синтаксис: Axios має простіший і більш послідовний синтаксис для виконання запитів та обробки відповідей;
  • Підтримка старих браузерів: Axios має вбудовану підтримку старих браузерів, які можуть не повністю підтримувати нативний API fetch().

Базове використання Axios

Axios забезпечує простий синтаксис для виконання як GET, так і POST запитів. Він повертає Promises, як і fetch(), але автоматично обробляє деякі рутинні завдання, наприклад, парсинг JSON.

GET-запит з використанням Axios

index.html

index.html

index.js

index.js

copy

Цей приклад демонструє використання Axios для GET-запиту. Функція getPostWithAxios викликає axios.get() для отримання даних з API-ендпоінту (/posts/1). Axios спрощує процес, автоматично розбираючи JSON-відповідь, що усуває необхідність окремого виклику .json(). Блок try...catch обробляє всі помилки, відображаючи або заголовок поста, або повідомлення про помилку в HTML.

POST-запит з Axios

index.html

index.html

index.js

index.js

copy

Цей приклад демонструє POST-запит із використанням Axios для надсилання даних до API. Функція sendPostWithAxios викликає axios.post() із кінцевою точкою API (/posts) та даними для нового поста, включаючи title, body та userId. Axios автоматично надсилає дані у форматі JSON, що спрощує процес. Блок try...catch обробляє всі помилки, відображаючи або назву створеного поста, або повідомлення про помилку в HTML.

Обробка помилок з Axios

Axios надає простий у використанні механізм для обробки помилок. Якщо запит не вдається (наприклад, через мережеву проблему або помилку сервера), Axios автоматично генерує помилку, яку можна обробити за допомогою try...catch.

index.html

index.html

index.js

index.js

copy

Цей приклад демонструє обробку помилок з Axios. Функція getInvalidPost намагається отримати дані з неіснуючого кінцевого пункту за допомогою axios.get(). Коли запит не вдається, Axios автоматично генерує помилку. Блок try...catch перехоплює цю помилку та відображає повідомлення про помилку в HTML.

Додаткові можливості та переваги Axios

Розглянемо деякі додаткові можливості Axios.

Перехоплювачі запитів і відповідей

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

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Підтримка тайм-ауту

Axios дозволяє встановлювати тайм-аути для запитів, що гарантує уникнення нескінченного очікування відповіді.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Спрощене оброблення помилок

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

Підтримка браузерів

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

1. Що Axios автоматично робить під час обробки JSON-відповідей?

2. Який метод слід використовувати для надсилання POST-запиту за допомогою Axios?

question mark

Що Axios автоматично робить під час обробки JSON-відповідей?

Select the correct answer

question mark

Який метод слід використовувати для надсилання POST-запиту за допомогою Axios?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 8
some-alt