Що таке axios?
Основні можливості Axios:
- Підтримка сучасних браузерів та Node.js
- Простий та зрозумілий API
- Можливість надсилання HTTP-запитів з різними методами (GET, POST, PUT, DELETE та інші)
- Підтримка запитів з заголовками та параметрами
- Вбудована підтримка перетворення даних у різних форматах (JSON, XML, FormData тощо)
- Автоматична серіалізація та десеріалізація даних
- Обробка помилок та перехоплення подій
- Можливість скасування запитів
- Інтеграція з популярними фреймворками (наприклад, React та Vue.js)
Завдяки простоті та зручності використання, Axios став однією з найбільш популярних бібліотек для роботи з HTTP-запитами в JavaScript. Вона дозволяє розробникам легко взаємодіяти з веб-серверами та отримувати або надсилати дані через API. Завдяки своїй гнучкості та потужності, Axios можна використовувати у багатьох проектах, від невеликих веб-сторінок до складних додатків.Приклад використання Axios для відправки GET-запиту:Таким чином, Axios надає простий і зручний спосіб здійснити HTTP-запити в JavaScript, роблячи роботу з мережею більш ефективною та зручною для розробників.Чому варто використовувати axios?ПеревагаОписПростота використанняAxios має простий та інтуїтивно зрозумілий API, що дозволяє швидко опанувати бібліотеку та почати використовувати її для надсилання запитів. Підтримка міжплатформенності Ця бібліотека може використовуватися як на стороні клієнта (браузер), так і на стороні сервера (Node.js). Вона дозволяє створювати універсальні додатки, які працюють як на клієнті, так і на сервері. Підтримка основних функцій HTTP Завдяки axios ви можете виконувати різні типи запитів (GET, POST, PUT, DELETE тощо), встановлювати заголовки, надсилати параметри та отримувати відповіді від сервера. Автоматична серіалізація та десеріалізація даних Бібліотека axios автоматично серіалізує дані при відправці запиту і десеріалізує дані, отримані від сервера. Це спрощує роботу з даними і дозволяє зосередитися на бізнес-логіці додатка. Обробка помилок Axios надає потужний механізм для обробки помилок під час виконання запитів. Це дозволяє легко визначити, якщо запит не вдався, і реагувати відповідно до цього.Усі ці переваги роблять axios ідеальним вибором для роботи з HTTP-запитами у веб-додатках. Бібліотека дозволяє вам ефективно працювати та спростити процес надсилання та отримання даних, що суттєво покращує користувацький досвід та економить ваш час і зусилля.Основи axiosОсновні переваги використання Axios:Простота використання та інтуїтивно зрозумілий APIПідтримка Promise-об’єктів для обробки асинхронних запитівМожливість надсилання запитів на сервер із використанням різних HTTP-методів (GET, POST, PUT, DELETE тощо)Підтримка установки заголовків запитів та обробки помилокВбудована серіалізація та десеріалізація даних у форматах JSON, FormData та іншихПриклад використання Axios для надсилання GET-запиту:в прикладі виконається GET-запит за вказаною URL '/api/data'. У разі успішного виконання запиту, відповідь буде доступна в властивості 'data' об'єкта 'response', який можна використати для обробки отриманих даних. У разі виникнення помилки, її можна обробити за допомогою методу 'catch'.Таким чином, завдяки простоті та зручності використання, Axios став одним з найпопулярніших інструментів для роботи з HTTP-запитами в JavaScript-розробці.Встановлення axiosПеред тим, як почати використовувати axios, необхідно встановити його в проєкті. Для цього є кілька способів.Перший спосіб - встановлення за допомогою пакетного менеджера npm. Відкрийте командний рядок у кореневій папці проєкту та виконайте наступну команду:npm install axiosЦя команда встановить axios у папку node_modules вашого проєкту та додасть його в залежності в package.json.Другий спосіб - установка за допомогою пакетного менеджера yarn. Відкрийте командний рядок у кореневій папці проекту та виконайте наступну команду:Yarn також встановить axios у папку node_modules і додасть його до залежностей у package.json.Після установки ви можете почати використовувати axios у своєму проекті. Просто імпортуйте його у потрібному файлі:import axios from 'axios';Зверніть увагу:axios може використовуватися як у середовищі браузера, так і на сервері. Якщо ви хочете використовувати axios у браузері, то можете підключити його безпосередньо через скрипт:Тепер ви готові почати здійснювати запити за допомогою axios!Налаштування запитівПри використанні бібліотеки Axios для відправки запитів важливо коректно налаштувати запити відповідно до вимог вашого проекту. Нижче наведені деякі поради щодо налаштування запитів з використаннямAxios:
- Встановіть базовий URL для всіх запитів за допомогою методу axios.defaults.baseURL. Це дозволяє уникнути дублювання URL у кожному запиті та спростити обслуговування коду.
- Визначте параметри запиту за допомогою об'єкта params. Вони будуть автоматично перетворені в рядок запиту виду key=value.
- Налаштуйте заголовки запиту за допомогою об'єкта headers. Це дозволяє передавати різні типи даних і налаштовувати аутентифікацію.
- Обробляйте помилки запиту, використовуючи блок catch у конструкції axios().then(. ).catch(. ). Ви можете обробляти помилки по-різному залежно від статусу відповіді або інших факторів.
- Використовуйте методи get, post, put, delete для відправки відповідних типів запитів. Вони спрощують код і дозволяють легко змінювати тип запиту.
Слідуючи цим порадом, ви зможете налаштувати запити в Axios з урахуванням вимог.вашого проєкту і отримати більш гнучкий і зручний код.Приклади використання axiosОсь кілька прикладів використання бібліотеки Axios для виконання HTTP-запитів:МетодПрикладОписGETaxios.get('/api/users')Виконує GET-запит за вказаною URL-адресою і повертає проміс, який розв'язується з даними відповіді.POSTaxios.post('/api/users', )Виконує POST-запит за вказаною URL-адресою з вказаними даними і повертає проміс, який розв'язується з даними відповіді.PUTaxios.put('/api/users/1', )Виконує PUT-запит за вказаною URL-адресою з вказаними даними і повертає проміс, який розв'язується з даними відповіді.DELETEaxios.delete('/api/users/1')Виконує DELETE-запит за вказаною URL-адресою іповертає проміс, який розв'язується з даними відповіді.Крім того, можна використовувати додаткові методи, такі як axios.all для виконання кількох запитів одночасно, а також axios.interceptors для перехоплення та обробки запитів і відповідей перед відправкою або після отримання.Відправка GET запитуДля відправки GET запиту скористайтеся методом axios.get(). Приклад коду:У цьому прикладі виконується GET запит за адресою /api/data. Після отримання відповіді дані доступні в властивості response.data.Ви також можете передати параметри в GET запиті. Наприклад:У цьому прикладі передаються два параметри - id зі значенням 123 та name зі значенням 'John'. Параметри додаються в URL запиту, наприклад, /api/data?id=123&name=John.Якщо виникає помилка під час виконання запиту, вона буде перехоплена блоком catch .Відправка POST запитуДля відправки POST запиту за допомогою бібліотеки axios необхідно використовувати метод axios.post(). Цей метод дозволяє відправити дані на сервер і отримати відповідь від нього.В даному прикладі відправляються дані у форматі JSON на URL /api/postData. Метод then виконується у випадку успішного виконання запиту, а метод catch викликається у випадку виникнення помилки.Ви також можете додати заголовки до POST запиту, вказавши їх другим параметром методу axios.post():В цьому прикладі ми додали заголовок Content-Type зі значенням application/json, щоб вказати серверу, що дані відправляються у форматі JSON.Таким чином, ви можете легко відправляти POST запити за допомогою бібліотеки axios у своїх проєктах, передаючи необхідні дані та заголовки.
Робота з відповідями
Після виконання запиту за допомогою axios, можна обробляти отримані від сервера дані. Зазвичай сервер відповідає на запит зі статусом і даними. Для роботи з відповіддю можна використовувати методи then і catch.
then - використовується для обробки успішної відповіді сервера. Усередині методу можна вказати які-небудь дії, які повинні бути виконані після отримання даних. Наприклад, можна розпарсити відповідь і відобразити її на сторінці.
axios.get('/api/data').then((response) => ).catch((error) => );catch - використовується для обробки помилок. Якщо запит завершується невдало, сервер повертає помилку, яку можна обробити всередині методу catch. У прикладі вище, у разі помилки буде виведено повідомлення про помилку в консоль.
Також можна використовувати метод finally, який виконується в будь-якому випадку, незалежно від того, успішно чи завершився запит чи ні. Наприклад, можна приховати індикатор завантаження або виконати якісь додаткові дії.В результаті роботи з відповідями, можна легко обробляти дані, отримані від сервера, і виконувати потрібні дії в залежності від результатів запиту. Це дозволяє створювати динамічні та відгукливі веб-додатки.