Як обробляти помилки у запитах Ajax

Обробка винятків у Laravel при AJAX запиті

Під час викидання винятків Laravel перевіряє, чи є у класі виключення метод render() , якщо так, то він використовує метод цього виключення для відображення результату. Якщо ви не хочете покладатися на глобальну систему вилову винятків Laravel, то можете повернути відповідь у JSON безпосередньо з контролера.

Laravel намагається перетворити винятки в формат, що читається в залежності від очікуваного від клієнта формату відповіді, будь то HTML або JSON, спочатку він перетворює різні формати винятків у простий виняток типу HttpException:

if ($e instanceof ModelNotFoundException) < $e = New NotFoundHttpException($e->getMessage(), $e); > elseif ($e instanceof AuthorizationException) < $e = new HttpException(403, $e->getMessage()); > elseif ($e instanceof TokenMismatchException) < $e = new HttpException(419, $e->getMessage()); >

І лише потім він обробляє деякі винятки особливим чином.

IlluminateHttpExceptionsHttpResponseException - це особливий виняток, вбудований в Laravel. Особливість цього виключення полягає в тому, що воно вже містить шаблон відповіді для клієнта, тому Laravel просто повертає відповідь цього винятку.

Рендеринг винятків аутентифікації

Виняток аутентифікації Illuminate\Auth\AuthenticationException обробляється з використанням методу unauthenticated() , який за умовчанням редиректит користувача на URL-адресу /login для повторної аутентифікації. Але, якщо клієнт надсилає заголовок Accept: application/json, то буде повернуто об'єкт у форматі JSON і 401 статусом:

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

Рендеринг винятків під час валідації

У випадку, коли викидається виняток типу Illuminate\Validation\ValidationException, фреймворк перенаправляє користувача на URL-адресу з якого користувач робив запит, передаючи сесією список з усіх помилок валідації, і це дає вам можливість перевірити, чи містить змінна $errors будь-які помилки ви можете вивести на екрані:

Якщо клієнтом було запрошено формат представлення - JSON, то Laravel повертає об'єкт з HTTP-кодом 422, який виглядає так:

Рендеринг інших винятків

На цьому етапі всі спеціальні винятки або перетворюються на простий виняток HttpException або обробляються особливим чином. Для інших винятків, Laravel спочатку перевіряє, який з форматів відповіді чекає клієнт: HTML або JSON, а потім, виходячи з цього, діє відповідним чином.

Як Laravel визначає, який формат відповіді клієнт очікує отримати?

Laravel використовує метод expectedJson() класу Illuminate\Http\Request. Цей метод перевіряє наявність заголовка X-Requested-With і чи містить значення XMLHttpRequest . Подібний заголовок встановлюється більшістю структур JavaScript за AJAX запитом, і Laravel використовує його, щоб припустити, що запит дійсно є AJAX-запитом. Однак, крім цього, Laravel також перевіряє заголовок X-PJAX у запиті і просто повертає false, якщо він присутній, оскільки цей заголовок вказує на те, що відповідь має бути не у форматі JSON, а у вигляді звичайного HTML-коду.

Нарешті, він перевіряє заголовок Accept , в якому перевіряє, чи чекає клієнт JSON у відповідь.

Отже, якщо клієнт чекає на JSON-відповідь, як Laravel перетворює виняток на JSON?

Якщо у конфігах фреймворку, параметру app.debug встановлено значення true , Laravel перетворює виняток у формат JSON з наступною структурою:

Це дуже допомагає під час розробки, оскільки це дає більше інформації розробнику, розуміння того, що пішло негаразд під час обробки запиту. Однак, очевидно, що параметру app.debug не має бути встановлене значення true у продакшені, оскільки подібне повідомлення може надати конфіденційну інформацію стороннім особам. У цьому випадку Laravel перевіряється, чи є викинутий виняток типом HttpException , і повертає повідомлення про помилку у вигляді наступної структури JSON:

Однак, якщо виняток не є підтипом HTTP або винятки з кодом 500, Laravel просто повертає повідомлення "Server Error":

Якщо ви довіряєте користувачам свого API, створіть кастомний виняток типу HTTP , і вони зможуть отримувати повідомлення помилок. Інакше ж Laravel візьме роботу із захисту ваших даних, приховавши фактичне повідомлення виключення, і покаже лише помилку "Server Error".

Що відбувається, коли очікується відповідь у форматі HTML?

Спочатку Laravel перевіряє, чи є у вас якісь уявлення у вашому каталозі resources/views/errors з ім'ям коду стану статусу помилки, наприклад, 404.blade.php, 500.blade.php, . . Якщо уявлення існує, то Laravel відображає його у браузері клієнта.

Якщо такого уявлення не було знайдено, Laravel використовуватиме обробник винятків за умовчанням, яким є обробник від Symfony. Він відображає гарне уявлення з детальною інформацією про виключення у випадку, якщо app.debug увімкнено, або "Whoops, looks like something went wrong.", якщо режим налагодження вимкнено.

Зміна стандартного формату відображення помилок

Іноді виникає необхідність змінити формат відображення помилок валідації при AJAX-запиті. За замовчуванням Laravel показує помилки у форматі:

Якщо вам потрібно кастомізувати цю відповідь, і зробити якийсь нестандартний висновок, наприклад, виведення тільки списку повідомлень, без їх угрупування під відповідними ключами, то потрібно змінити файл app/Exceptions/Handler.php :

// перевіряємо, що це AJAX запит, або відповідь потрібно повернути у форматі JSON if(($request->ajax() && !$request->pjax()) || $request->wantsJson()) < // перевіряємо , що виняток є типом помилки валідації if($exception instanceof ValidationException) < return new JsonResponse([ 'success' =>false, 'errors' => \Illuminate\Support\Arr::collapse($exception->errors()), 'message' => $exception->getMessage() ], 422) ; > return new JsonResponse([ 'success' => false, 'message' => $exception->getMessage() ], 422); >

В результаті цієї модифікації, відповідь виглядатиме:

Аналогічно ви можете кастомізувати індивідуально будь-який тип винятку. Або ж, можете написати загальний оброблювач для всіх винятків. Типу того, що було додано кілька нижче обробки винятків валідації:

return new JsonResponse([ 'success' => false, 'message' => $exception->getMessage() ], 422);

Резюме

У цій статті я докладно розповів, як працює вилов та обробка винятків у Laravel. Було показано весь їхній життєвий цикл, і пояснено роботу кожного з них. Також був продемонстрований приклад того, як відобразити кастомну відповідь у JSON при помилках валідації, та різних HTTP-статусах.Ця стаття з'явилася після написання першої статті про створення кастомних сторінок за винятків, де були розглянуті приклади вилову винятків та відповідних їх індивідуальної обробки. Після прочитання цих статей ви можете сказати, що знаєте про обробку винятків у Laravel майже все.

Sign up for more like this.

У серці. Назавжди.

Вчора у мене помер однокласник. А сьогодні бабуся. І хто б міг уявити, що цей рік принесе війну, смерть товариша, та смерть члена сім'ї? Це боляче. Проте це добре нагадування про те, як швидко тече година. І як його ціна збільшується кожної марно витраченої секунди. І я не

Ось такий він, руський світ

"Руський світ" - звучить дуже сильно та виправдовуюче. Гарна обгортка виправдання слабкості, аморальності та нікчемності своїх дійсних намірів. Руський світ, який дуже сладко звучить для всіх, хто хоче зачинити очі на факт повномасштабної війни. Дуже добре виправдання вбивства для купки звірів. Втім, це ж росія, в якій усе

Перехоплення запитів та відповідей JavaScript Fetch API

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

Обробка помилок у запитах AJAX в Vue.js: корисні поради та методи

При розробці веб-застосунків з використанням Vue.js нерідко виникає необхідність виконання асинхронних запитів до сервера за допомогою AJAX.Як і будь-які інші операції, такі запити можуть завершуватися невдало, наприклад через проблеми з сервером, мережними збоями або неправильними даними, що передаються з клієнта.

Важливо обробляти всі можливі помилки, що виникають у таких випадках, щоб надати користувачеві інформацію про проблему, що відбулася, і вжити необхідних заходів для її вирішення. У Vue.js є кілька способів обробки помилок під час виконання AJAX-запитів.

Один із найпростіших та найефективніших способів – використовувати метод catch() при виконанні запитів за допомогою Axios, популярної бібліотеки для роботи з HTTP-запитами у Vue.js. Всередині методу catch() можна визначити логіку для обробки помилок, наприклад показ повідомлення про помилку або перенаправлення користувача на іншу сторінку.

Навіщо обробляти помилки у запитах AJAX в Vue.js

При роботі з AJAX-запитами у Vue.js рано чи пізно можна зіткнутися з ситуацією, коли виникають помилки при надсиланні або отриманні даних. І в таких випадках дуже важливо правильно опрацьовувати ці помилки.

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

По-друге, обробка помилок допомагає налагодити проблеми у коді. Коли ми отримуємо помилку під час виконання AJAX-запиту, це може бути попередженням про проблему з кодом на сервері або в програмі.Хороша обробка помилок дозволить нам отримати більш детальну інформацію про проблему та спростить пошук та виправлення помилкового коду.

І, нарешті, обробка помилок дозволяє покращити безпеку нашої програми. Якщо ми не обробляємо помилки, зловмисники можуть використовувати ці помилки для отримання доступу до важливих даних або навіть впровадження шкідливого коду на нашому сервері. Використовуючи механізми обробки помилок, ми можемо запобігти таким атакам і убезпечити нашу програму.

Проблеми, пов'язані з обробкою помилок в AJAX-запитах Vue.js

При роботі з AJAX-запитами у Vue.js можуть виникати різні проблеми, пов'язані з обробкою помилок. Важливо вміти визначити, які помилки можуть виникнути та як на них реагувати.

Однією з основних проблем є помилки, пов'язані з неправильним форматом даних або неможливістю виконати запит на сервері. У разі сервер може повернути HTTP-статус код, що вказує на проблему. Наприклад, статус коду 400 означає неправильний запит, а статус коду 500 вказує на помилку сервера. При отриманні таких статусів важливо вміти адекватно відреагувати на них у додатку.

Ще одна поширена проблема – це проблеми зі з'єднанням. Можливо, сервер недоступний або з'єднання було перервано. У такому разі, треба обробити помилку та повідомити користувача про проблему. Це може бути повідомлення про помилку або спроба повторити запит пізніше.

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

Важливо пам'ятати, що обробка помилок в AJAX-запитах є невід'ємною частиною розробки додатків. Вміння адекватно реагувати на помилки та інформувати користувача про проблеми підвищує зручність використання програми та забезпечує стабільність та надійність роботи.

Проблеми з обробкою помилок

Однією з основних проблем обробки помилок є правильне визначення їх типу. Залежно від типу помилки, необхідно вжити відповідних дій та оновити стан програми. Наприклад, якщо була отримана помилка з кодом 404, то, можливо, потрібно показати повідомлення про відсутність даних, а якщо помилка пов'язана зі з'єднанням, то потрібно запропонувати користувачеві перевірити інтернет-з'єднання.

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

Також при роботі з AJAX-запитами можуть виникати проблеми зі скасуванням запитів. Якщо користувач раптово закриває сторінку або переходить на іншу, спочатку запущені запити залишаться висіти і можуть викликати проблеми при подальшій обробці даних або відображенні сторінки. Для вирішення цієї проблеми необхідно вміти скасовувати запити вчасно та коректно опрацьовувати такі ситуації.

Зрештою, проблема з обробкою помилок може бути пов'язана з непередбаченими винятковими ситуаціями. Наприклад, помилки в коді програми або некоректне використання бібліотеки AJAX-запитів.У таких випадках важливо мати логування помилок та способи їх відстеження, щоб оперативно реагувати на такі ситуації та виправляти проблеми.

Проблема	Рекомендації щодо рішення
Визначення типу помилки	Визначити та класифікувати різні типи помилок для ухвалення відповідних дій.
Обробка помилок на сервері	Переконайтеся, що формат відповіді сервера відповідає очікуваному та правильно обробляти помилки відповідно до цього формату.
Скасування запитів	Вміти скасовувати запити вчасно та коректно обробляти ситуації, коли запити залишаються висіти.
Непередбачені виняткові ситуації	Мати логування помилок та способи їх відстеження для оперативної реакції та виправлення проблем.

Необроблені помилки

Під час виконання AJAX-запитів у Vue.js можуть виникати різні помилки, але якщо не передбачено відповідних обробників помилок, то вони залишаються поза увагою. Це може призвести до того, що користувачу не буде показано повідомлення про помилку, а програма може продовжити роботу нестійким способом.

Необроблені помилки можуть бути викликані різними причинами, наприклад, неправильно вказаними URL-адресами, некоректними форматами даних, проблемами мережі та іншими. Якщо додаток не передбачив механізм для їх перехоплення та обробки, то буде відсутня можливість дізнатися про причини помилки, що виникла, і, відповідно, неможливість вжити заходів для її виправлення.

Визначте обробник помилок, який активуватиметься у разі виникнення необробленої помилки.
Створіть екземпляр Vue.js та додайте обробник помилок до інтерсептора відповідей.

Поліпшення досвіду користувача

Обробка помилок у запитах AJAX в Vue.js відіграє важливу роль у поліпшенні досвіду користувача.Коли користувач взаємодіє з веб-програмою, непередбачені помилки можуть виникнути, наприклад, через проблеми з мережею або сервером. Замість того, щоб показувати користувачеві просто текст помилки, ми можемо зробити додаткові кроки для покращення його досвіду.

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

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

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

В цілому, обробка помилок у запитах AJAX у Vue.js може суттєво підвищити зручність використання веб-програми. Надання інформативних повідомлень про помилки, індикаторів завантаження та додаткової інформації про помилки допоможе користувачеві швидко розібратися в проблемі та покращить його досвід взаємодії з програмою.

Методи обробки помилок

Під час виконання AJAX-запитів у Vue.js можуть виникати різні помилки, такі як помилки мережі або помилки сервера. Для обробки цих помилок можна використовувати кілька способів:

try-catch блок: можна обернути код, який може викликати помилку, до блоку try-catch. У блоці try можна виконати запит і при виникненні помилки перехопити її в блоці catch і виконати відповідну обробку. Наприклад, можна вивести повідомлення про помилку на сторінку або виконати інші дії, які потрібні у разі помилки.
.catch() метод: якщо ви використовуєте метод .then() для виконання AJAX-запиту, ви можете прикріпити метод .catch() для обробки помилок. Якщо запит завершується з помилкою, метод .catch() буде викликаний, і ви можете виконати відповідну обробку помилок. Наприклад, можна вивести повідомлення про помилку на сторінку або виконати інші дії.
Глобальний перехоплювач помилок: у проекті Vue.js ви можете використовувати глобальний перехоплювач помилок, щоб перехоплювати всі помилки, що виникають під час виконання AJAX-запитів. Для цього можна використовувати метод Vue.config.errorHandler. У цьому методі ви можете обробити помилки, наприклад, надіслати їх на сервер або вивести повідомлення про помилку на сторінку. Не забудьте, що цей метод перехоплюватиме всі помилки у вашому проекті, тому будьте обережні та перевірте, що помилки є результатом виконання AJAX-запитів.

Використання try-catch блоку

Для того щоб використовувати try-catch блок, необхідно помістити код, який може викликати помилку. Якщо в блоці try відбувається помилка, виконання коду припиняється і виконання переходить до блоку catch. У блоці catch можна виконати певні дії, щоб обробити помилку та повідомити її користувачеві.

Наприклад, якщо ми надсилаємо запит AJAX за допомогою Vue.js, ми можемо помістити цей код у блок try:

try ).catch(error => );> catch (error)

Якщо при виконанні запиту станеться помилка, її буде перехоплено в блоці catch, і ми зможемо виконати певні дії для її обробки. Наприклад, ми можемо вивести повідомлення про помилку або виконати інші дії для відновлення роботи програми.

Використання try-catch блоку дозволяє більш гнучко та контрольовано обробляти помилки у запитах AJAX у Vue.js. Завдяки цьому підходу ми можемо запобігти падінню програми та повідомити користувача про проблеми, що виникли.

Зауважте, що блок try-catch працює тільки в синхронному коді, тому необхідно враховувати цей момент при розробці асинхронних запитів AJAX.

Використання обробника помилок глобального рівня

У Vue.js ви можете використовувати глобальний обробник помилок, щоб керувати помилками AJAX-запитів на рівні програми. Глобальний обробник помилок дозволяє легко обробляти помилки, які можуть виникнути у всіх компонентах вашої програми.

Щоб використовувати глобальний обробник помилок, ви повинні зареєструвати його в екземплярі Vue перед створенням екземпляра програми. Ви можете зробити це за допомогою методу Vue.config.errorHandler . Наприклад:

У цьому прикладі глобальний обробник помилок приймає три аргументи:

err — об'єкт помилки, який містить інформацію про помилку.
vm - екземпляр Vue, в якому сталася помилка.
info — додаткова інформація про помилку, якщо вона доступна.

Всередині обробника помилок можна виконувати додаткову обробку помилки, наприклад, відображення повідомлення про помилку або надсилання звіту про помилку на сервер. Ви також можете змінити поведінку вашої програми залежно від типу помилки та стану програми.

Глобальний обробник помилок дозволяє вам легко контролювати та керувати помилками AJAX-запитів на рівні програми, що робить вашу програму більш надійною та стійкою.

Використання промісів та ланцюжків обробки помилок

Vue.js надає зручні засоби для обробки помилок у запитах AJAX з використанням промісів. Проміси дозволяють керувати потоком виконання асинхронного коду та легко обробляти можливі помилки.

Промисли в Vue.js повертають об'єкти, на яких можна викликати методи .then() і .catch(). Метод .then() викликається при успішному виконанні запиту, а метод .catch() у разі виникнення помилок.

Приклад використання промісів для обробки помилок може виглядати так:

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

У цьому прикладі використовується бібліотека axios, яка надає зручні методи для роботи з AJAX-Запитами. У разі успішного виконання запиту дані будуть виведені в консоль за допомогою методу console.log(). Якщо ж станеться помилка, вона буде виведена за допомогою методу console.error().

Ланцюжки обробки помилок можуть бути дуже корисними при роботі з AJAX-запитами, особливо якщо потрібно виконати кілька послідовних запитів або виконати деякі дії перед обробкою помилок. У Vue.js ланцюжки обробки помилок можна створювати за допомогою методу .then().

Приклад ланцюжка обробки помилок може виглядати так:

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

У цьому прикладі спочатку виконується GET-запит для отримання даних із сервера, потім отримані дані надсилаються на сервер за допомогою методу axios.post(). Якщо обидва запити виконуються успішно, дані відправленого запиту будуть виведені в консоль. У разі виникнення помилок вони будуть оброблені за допомогою методу console.error().

Використання промісів та ланцюжків обробки помилок дозволяє більш ефективно керувати запитами AJAX в Vue.js та обробляти можливі помилки.

Використання стану помилки та відображення помилки

По-перше, необхідно створити змінну, яка відстежуватиме стан помилки. Наприклад:

У даному прикладі, якщо виникне помилка під час виконання запиту AJAX, змінна "error" встановлюватиметься на відповідне повідомлення про помилку. Потім це повідомлення можна відобразити в HTML коді за допомогою директиви v-if.

Для візуального виділення помилки можна додати стилі або класи CSS до елемента, що містить повідомлення про помилку:

У цьому прикладі додано клас "error" до елемента з повідомленням про помилку, щоб встановити червоний колір та виділити повідомлення. Звичайно, стилі можуть бути змінені відповідно до дизайну вашої програми.

Використання стану помилки та відображення повідомлення про помилку допоможе вам більш ефективно реагувати на помилки в запитах AJAX і надати зрозумілу інформацію користувачам про проблему.

Повний гайд AJAX — Як працювати з асинхронними запитами в браузері

Якщо ви хоч раз стикалися з поняттям AJAX, то, напевно, чули про те, як важливо вміти завантажувати дані без перезавантаження сторінки. У цьому гайді розберемо основи AJAX і покажемо, як використовувати його для створення динамічних і чуйних веб-додатків.

Що таке AJAX?

AJAX (Asynchronous JavaScript and XML) — це не конкретна технологія, а метод, який поєднує декілька технологій для створення асинхронних HTTP-запитів. Завдяки AJAX сторінки можуть частково оновлюватися, що підвищує швидкість і зручність роботи з сайтом. AJAX допомагає нам підвантажувати дані з сервера, відображати їх на сторінці та взаємодіяти з сервером, не перевантажуючи браузер.

Основні складові AJAX:

XMLHttpRequest (XHR) — браузерний об'єкт для створення запитів HTTP. Сьогодні його часто замінюють на Fetch API, але він все ще використовується.
JSON - Основний формат обміну даними в AJAX-запитах (XML фактично вийшов з використання).
Асинхронність — сторінки залишаються інтерактивними навіть при завантаженні даних.

Простий приклад AJAX-запиту з XMLHttpRequest

Переходимо до практики. Розглянемо, як зробити AJAX-запит за допомогою XMLHttpRequest, починаючи з найпростішого запиту.

// 1. Створюємо новий об'єкт XMLHttpRequest const xhr=new XMLHttpRequest(); // 2. Відкриваємо запит: метод GET, URL та асинхронно = true xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true); // 3. Налаштовуємо обробник для обробки даних після завантаження xhr.onload = function() < if (xhr.status === 200) < // Парсим відповідь JSON const data = JSON.parse(xhr.responseText); console.log(data); >else < console.error("Помилка завантаження даних:", xhr.statusText); >>; // 4. Надсилаємо запит xhr.send();

Пояснення до коду:

Створюємо об'єкт XMLHttpRequest. Він і є основним компонентом AJAX-запиту.
Налаштовуємо запит: вказуємо метод (GET) та URL, до якого звертаємось. Останній аргумент true робить запит асинхронним.
Обробка відповіді: після завантаження перевіряємо статус (має бути 200 для успішної відповіді), парсим JSON і працюємо з даними.
Надсилання запиту: метод send() виконує запит.

Приклад із POST-запитом

Припустимо, вам потрібно не лише отримувати, а й надсилати дані. У цьому випадку використовується метод POST:

// Дані, які хочемо відправити const data = JSON.stringify(< title: "AJAX Guide", body: "How to use AJAX", userId: 1 >); // Відкриваємо запит xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true); // Встановлюємо заголовки xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); // Обробник для отримання відповіді xhr.onload = function() < if (xhr.status === 201) < console.log("Дані надіслані:", xhr.responseText); >>; // Надсилаємо запит з даними xhr.send(data);

Перехід на новий рівень: Використання Fetch API

Хоча XMLHttpRequest працює непогано, він має свої мінуси: надлишкова структура, складне управління помилками, обробка JSON. Fetch API – це більш сучасний та простий спосіб для виконання AJAX-запитів.

Базовий приклад GET-запиту з Fetch API

fetch("https://jsonplaceholder.typicode.com/posts") .then(response => < if (!response.ok) throw new Error(`Помилка: $`); return response.json(); >) .then(data => console.log(data)) .catch(error => console.error("Помилка запиту:", error));

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

З fetch відправка POST-запиту виконується також просто:

fetch("https://jsonplaceholder.typicode.com/posts", < method: "POST", headers: < "Content-Type": "application/json" >, body: JSON.stringify(< title: "AJAX Guide", body: "How to use AJAX", userId: 1 >) >) .then(response => < if (!response.ok) throw new Error(`Помилка $`); return response.json(); => console.error("Помилка запиту:", error));

Переваги Fetch API:

Чистий та лаконічний синтаксис.
Підтримка промісів дозволяє використовувати then і catch, покращуючи роботу з асинхронністю.
Підтримка async/await робить код читальнішим.

Асинхронний синтаксис async/await

JavaScript синтаксис async/await надає ще більш елегантний спосіб роботи з асинхронністю. Розглянемо приклад з використанням async та await для FETCH-запиту.

async function fetchData() < try < const response = await fetch("https://jsonplaceholder.typicode.com/posts"); if (!response.ok) throw new Error(`Помилка: $`); const data = await response.json(); console.log(data); > catch (error) < console.error("Помилка запиту:", error); >> fetchData();

Тепер наш асинхронний код виглядає як синхронний, завдяки чому його легко читати та налагоджувати.